,
- * }
- * }
- * };
+ * Checks if any of the configured audiences on the page can be resolved.
+ * @param {String[]} pageAudiences a list of configured audiences for the page
+ * @param {Object} options the plugin options
+ * @returns Returns the names of the resolved audiences, or `null` if no audience is configured
*/
-function parseExperimentConfig(json, context) {
- const config = {};
- try {
- json.settings.data.forEach((line) => {
- const key = context.toCamelCase(line.Name);
- if (key === 'audience' || key === 'audiences') {
- config.audiences = line.Value ? line.Value.split(',').map((str) => str.trim()) : [];
- } else if (key === 'experimentName') {
- config.label = line.Value;
- } else {
- config[key] = line.Value;
- }
- });
- const variants = {};
- let variantNames = Object.keys(json.experiences.data[0]);
- variantNames.shift();
- variantNames = variantNames.map((vn) => context.toCamelCase(vn));
- variantNames.forEach((variantName) => {
- variants[variantName] = {};
- });
- let lastKey = 'default';
- json.experiences.data.forEach((line) => {
- let key = context.toCamelCase(line.Name);
- if (!key) key = lastKey;
- lastKey = key;
- const vns = Object.keys(line);
- vns.shift();
- vns.forEach((vn) => {
- const camelVN = context.toCamelCase(vn);
- if (key === 'pages' || key === 'blocks') {
- variants[camelVN][key] = variants[camelVN][key] || [];
- if (key === 'pages') variants[camelVN][key].push(new URL(line[vn]).pathname);
- else variants[camelVN][key].push(line[vn]);
- } else {
- variants[camelVN][key] = line[vn];
- }
- });
- });
- config.variants = variants;
- config.variantNames = variantNames;
- return config;
- } catch (e) {
- // eslint-disable-next-line no-console
- console.log('error parsing experiment config:', e, json);
+export async function getResolvedAudiences(pageAudiences, options) {
+ if (!pageAudiences.length || !Object.keys(options.audiences).length) {
+ return null;
}
- return null;
-}
-
-/**
- * Checks if the given config is a valid experimentation configuration.
- * @param {object} config the config to check
- * @returns `true` if it is valid, `false` otherwise
- */
-export function isValidExperimentationConfig(config) {
- if (!config.variantNames
- || !config.variantNames.length
- || !config.variants
- || !Object.values(config.variants).length
- || !Object.values(config.variants).every((v) => (
- typeof v === 'object'
- && !!v.blocks
- && !!v.pages
- && (v.percentageSplit === '' || !!v.percentageSplit)
- ))) {
- return false;
+ // If we have a forced audience set in the query parameters (typically for simulation purposes)
+ // we check if it is applicable
+ const usp = new URLSearchParams(window.location.search);
+ const forcedAudience = usp.has(options.audiencesQueryParameter)
+ ? toClassName(usp.get(options.audiencesQueryParameter))
+ : null;
+ if (forcedAudience) {
+ return pageAudiences.includes(forcedAudience) ? [forcedAudience] : [];
}
- return true;
+
+ // Otherwise, return the list of audiences that are resolved on the page
+ const results = await Promise.all(
+ pageAudiences
+ .map((key) => {
+ if (options.audiences[key] && typeof options.audiences[key] === 'function') {
+ return options.audiences[key]();
+ }
+ return false;
+ }),
+ );
+ return pageAudiences.filter((_, i) => results[i]);
}
/**
@@ -211,124 +273,17 @@ function inferEmptyPercentageSplits(variants) {
if (variantsWithoutPercentage.length) {
const missingPercentage = remainingPercentage / variantsWithoutPercentage.length;
variantsWithoutPercentage.forEach((v) => {
- v.percentageSplit = missingPercentage.toFixed(2);
+ v.percentageSplit = missingPercentage.toFixed(4);
});
}
}
/**
- * Gets experiment config from the metadata.
- *
- * @param {string} experimentId The experiment identifier
- * @param {string} instantExperiment The list of varaints
- * @returns {object} the experiment manifest
- */
-function getConfigForInstantExperiment(
- experimentId,
- instantExperiment,
- pluginOptions,
- context,
-) {
- const audience = context.getMetadata(`${pluginOptions.experimentsMetaTag}-audience`);
- const config = {
- label: `Instant Experiment: ${experimentId}`,
- audiences: audience ? audience.split(',').map(context.toClassName) : [],
- status: context.getMetadata(`${pluginOptions.experimentsMetaTag}-status`) || 'Active',
- startDate: context.getMetadata(`${pluginOptions.experimentsMetaTag}-start-date`),
- endDate: context.getMetadata(`${pluginOptions.experimentsMetaTag}-end-date`),
- id: experimentId,
- variants: {},
- variantNames: [],
- };
-
- const nbOfVariants = Number(instantExperiment);
- const pages = Number.isNaN(nbOfVariants)
- ? instantExperiment.split(',').map((p) => new URL(p.trim(), window.location).pathname)
- : new Array(nbOfVariants).fill(window.location.pathname);
-
- const splitString = context.getMetadata(`${pluginOptions.experimentsMetaTag}-split`);
- const splits = splitString
- // custom split
- ? splitString.split(',').map((i) => parseInt(i, 10) / 100)
- // even split fallback
- : [...new Array(pages.length)].map(() => 1 / (pages.length + 1));
-
- config.variantNames.push('control');
- config.variants.control = {
- percentageSplit: '',
- pages: [window.location.pathname],
- blocks: [],
- label: 'Control',
- };
-
- pages.forEach((page, i) => {
- const vname = `challenger-${i + 1}`;
- config.variantNames.push(vname);
- config.variants[vname] = {
- percentageSplit: `${splits[i].toFixed(2)}`,
- pages: [page],
- blocks: [],
- label: `Challenger ${i + 1}`,
- };
- });
- inferEmptyPercentageSplits(Object.values(config.variants));
- return (config);
-}
-
-/**
- * Gets experiment config from the manifest and transforms it to more easily
- * consumable structure.
- *
- * the manifest consists of two sheets "settings" and "experiences", by default
- *
- * "settings" is applicable to the entire test and contains information
- * like "Audience", "Status" or "Blocks".
- *
- * "experience" hosts the experiences in rows, consisting of:
- * a "Percentage Split", "Label" and a set of "Links".
- *
- *
- * @param {string} experimentId The experiment identifier
- * @param {object} pluginOptions The plugin options
- * @returns {object} containing the experiment manifest
+ * Converts the experiment config to a decision policy
+ * @param {Object} config The experiment config
+ * @returns a decision policy for the experiment config
*/
-async function getConfigForFullExperiment(experimentId, pluginOptions, context) {
- let path;
- if (experimentId.includes(`/${pluginOptions.experimentsConfigFile}`)) {
- path = new URL(experimentId, window.location.origin).href;
- // eslint-disable-next-line no-param-reassign
- [experimentId] = path.split('/').splice(-2, 1);
- } else {
- path = `${pluginOptions.experimentsRoot}/${experimentId}/${pluginOptions.experimentsConfigFile}`;
- }
- try {
- const resp = await fetch(path);
- if (!resp.ok) {
- // eslint-disable-next-line no-console
- console.log('error loading experiment config:', resp);
- return null;
- }
- const json = await resp.json();
- const config = pluginOptions.parser
- ? pluginOptions.parser(json, context)
- : parseExperimentConfig(json, context);
- if (!config) {
- return null;
- }
- config.id = experimentId;
- config.manifest = path;
- config.basePath = `${pluginOptions.experimentsRoot}/${experimentId}`;
- inferEmptyPercentageSplits(Object.values(config.variants));
- config.status = context.getMetadata(`${pluginOptions.experimentsMetaTag}-status`) || config.status;
- return config;
- } catch (e) {
- // eslint-disable-next-line no-console
- console.log(`error loading experiment manifest: ${path}`, e);
- }
- return null;
-}
-
-function getDecisionPolicy(config) {
+function toDecisionPolicy(config) {
const decisionPolicy = {
id: 'content-experimentation-policy',
rootDecisionNodeId: 'n1',
@@ -349,364 +304,610 @@ function getDecisionPolicy(config) {
return decisionPolicy;
}
-async function getConfig(experiment, instantExperiment, pluginOptions, context) {
- const usp = new URLSearchParams(window.location.search);
- const [forcedExperiment, forcedVariant] = usp.has(pluginOptions.experimentsQueryParameter)
- ? usp.get(pluginOptions.experimentsQueryParameter).split('/')
- : [];
+/**
+ * Creates an instance of a modification handler that will be responsible for applying the desired
+ * personalized experience.
+ *
+ * @param {Object} overrides The config overrides
+ * @param {Function} metadataToConfig a function that will handle the parsing of the metadata
+ * @param {Function} getExperienceUrl a function that returns the URL to the experience
+ * @param {Object} pluginOptions the plugin options
+ * @param {Function} cb the callback to handle the final steps
+ * @returns the modification handler
+ */
+function createModificationsHandler(
+ overrides,
+ metadataToConfig,
+ getExperienceUrl,
+ pluginOptions,
+ cb,
+) {
+ return async (el, metadata) => {
+ const config = await metadataToConfig(pluginOptions, metadata, overrides);
+ if (!config) {
+ return null;
+ }
+ const ns = { config, el };
+ 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);
+ } else {
+ res = url;
+ }
+ cb(el.tagName === 'MAIN' ? document.body : ns.el, ns.config, res ? url : null);
+ if (res) {
+ ns.servedExperience = url;
+ }
+ return ns;
+ };
+}
- const experimentConfig = instantExperiment
- ? await getConfigForInstantExperiment(experiment, instantExperiment, pluginOptions, context)
- : await getConfigForFullExperiment(experiment, pluginOptions, context);
+/**
+ * Rename plural properties on the object to singular.
+ * @param {Object} obj The object
+ * @param {String[]} props The properties to rename.
+ * @returns the object with plural properties renamed.
+ */
+function depluralizeProps(obj, props = []) {
+ props.forEach((prop) => {
+ if (obj[`${prop}s`]) {
+ obj[prop] = obj[`${prop}s`];
+ delete obj[`${prop}s`];
+ }
+ });
+ return obj;
+}
- // eslint-disable-next-line no-console
- console.debug(experimentConfig);
- if (!experimentConfig) {
- return null;
+/**
+ * Fetch the configuration entries from a JSON manifest.
+ * @param {String} urlString the URL to load
+ * @returns the list of entries that apply to the current page
+ */
+async function getManifestEntriesForCurrentPage(urlString) {
+ try {
+ const url = new URL(urlString, window.location.origin);
+ const response = await fetch(url);
+ const json = await response.json();
+ return json.data
+ .map((entry) => Object.keys(entry).reduce((res, k) => {
+ res[k.toLowerCase()] = entry[k];
+ return res;
+ }, {}))
+ .filter((entry) => (!entry.page && !entry.pages)
+ || entry.page === window.location.pathname
+ || entry.pages === window.location.pathname)
+ .filter((entry) => entry.selector || entry.selectors)
+ .filter((entry) => entry.url || entry.urls)
+ .map((entry) => depluralizeProps(entry, ['page', 'selector', 'url']));
+ } catch (err) {
+ // eslint-disable-next-line no-console
+ console.warn('Cannot apply manifest: ', urlString, err);
}
+ return null;
+}
- const forcedAudience = usp.has(pluginOptions.audiencesQueryParameter)
- ? context.toClassName(usp.get(pluginOptions.audiencesQueryParameter))
- : null;
+/**
+ * Watches the page for injected DOM elements and automatically applies the fragment customizations
+ */
+function watchMutationsAndApplyFragments(
+ ns,
+ scope,
+ entries,
+ aggregator,
+ getExperienceUrl,
+ pluginOptions,
+ metadataToConfig,
+ overrides,
+ cb,
+) {
+ if (!entries.length) {
+ return;
+ }
- experimentConfig.resolvedAudiences = await getResolvedAudiences(
- experimentConfig.audiences.map(context.toClassName),
+ new MutationObserver(async (_, observer) => {
+ // eslint-disable-next-line no-restricted-syntax
+ for (const entry of entries) {
+ // eslint-disable-next-line no-await-in-loop
+ const config = await metadataToConfig(pluginOptions, entry, overrides);
+ if (!config || entry.isApplied) {
+ return;
+ }
+ const el = scope.querySelector(entry.selector);
+ if (!el) {
+ return;
+ }
+ entry.isApplied = true;
+ const fragmentNS = { config, el, type: 'fragment' };
+ // eslint-disable-next-line no-await-in-loop
+ const url = await getExperienceUrl(fragmentNS.config);
+ 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);
+ } else {
+ res = url;
+ }
+ cb(el.tagName === 'MAIN' ? document.body : fragmentNS.el, fragmentNS.config, res ? url : null);
+ if (res) {
+ fragmentNS.servedExperience = url;
+ }
+ debug('fragment', ns, fragmentNS);
+ aggregator.push(fragmentNS);
+ }
+ if (entries.every((entry) => entry.isApplied)) {
+ observer.disconnect();
+ }
+ }).observe(scope, { childList: true, subtree: true });
+}
+
+/**
+ * Apply the page modifications for the specified type.
+ *
+ * @param {String} ns the type of modifications to do
+ * @param {String} paramNS the query parameter namespace
+ * @param {Object} pluginOptions the plugin options
+ * @param {Function} metadataToConfig a function that will handle the parsing of the metadata
+ * @param {Function} manifestToConfig a function that will handle the parsing of the manifest
+ * @param {Function} getExperienceUrl a function that returns the URL to the experience
+ * @param {Function} cb the callback to handle the final steps
+ * @returns an object containing the details of the page modifications that where applied
+ */
+async function applyAllModifications(
+ type,
+ paramNS,
+ pluginOptions,
+ metadataToConfig,
+ manifestToConfig,
+ getExperienceUrl,
+ cb,
+) {
+ const modificationsHandler = createModificationsHandler(
+ getAllQueryParameters(paramNS),
+ metadataToConfig,
+ getExperienceUrl,
pluginOptions,
- context,
- );
- experimentConfig.run = (
- // experiment is active or forced
- (['active', 'on', 'true'].includes(context.toClassName(experimentConfig.status)) || forcedExperiment)
- // experiment has resolved audiences if configured
- && (!experimentConfig.resolvedAudiences || experimentConfig.resolvedAudiences.length)
- // forced audience resolves if defined
- && (!forcedAudience || experimentConfig.audiences.includes(forcedAudience))
- && (!experimentConfig.startDate || new Date(experimentConfig.startDate) <= Date.now())
- && (!experimentConfig.endDate || new Date(experimentConfig.endDate) > Date.now())
+ cb,
);
- window.hlx = window.hlx || {};
- window.hlx.experiment = experimentConfig;
+ const configs = [];
- // eslint-disable-next-line no-console
- console.debug('run', experimentConfig.run, experimentConfig.audiences);
- if (forcedVariant && experimentConfig.variantNames.includes(forcedVariant)) {
- experimentConfig.selectedVariant = forcedVariant;
- } else {
- // eslint-disable-next-line import/extensions
- const { ued } = await import('./ued.js');
- const decision = ued.evaluateDecisionPolicy(getDecisionPolicy(experimentConfig), {});
- experimentConfig.selectedVariant = decision.items[0].id;
+ // Full-page modifications
+ const pageMetadata = getAllMetadata(type);
+ const pageNS = await modificationsHandler(
+ document.querySelector('main'),
+ pageMetadata,
+ );
+ if (pageNS) {
+ pageNS.type = 'page';
+ configs.push(pageNS);
+ debug('page', type, pageNS);
+ }
+
+ // Section-level modifications
+ let sectionMetadata;
+ await Promise.all([...document.querySelectorAll('.section-metadata')]
+ .map(async (sm) => {
+ sectionMetadata = getAllSectionMeta(sm, type);
+ const sectionNS = await modificationsHandler(
+ sm.parentElement,
+ sectionMetadata,
+ );
+ if (sectionNS) {
+ sectionNS.type = 'section';
+ debug('section', type, sectionNS);
+ configs.push(sectionNS);
+ }
+ }));
+
+ // Fragment-level modifications
+ if (pageMetadata.manifest) {
+ let entries = await getManifestEntriesForCurrentPage(pageMetadata.manifest);
+ if (entries) {
+ entries = manifestToConfig(entries);
+ watchMutationsAndApplyFragments(
+ type,
+ document.body,
+ entries,
+ configs,
+ getExperienceUrl,
+ pluginOptions,
+ metadataToConfig,
+ getAllQueryParameters(paramNS),
+ cb,
+ );
+ }
}
- return experimentConfig;
+
+ return configs;
}
-export async function runExperiment(document, options, context) {
- if (isBot()) {
- return false;
- }
+function aggregateEntries(type, allowedMultiValuesProperties) {
+ return (entries) => entries.reduce((aggregator, entry) => {
+ Object.entries(entry).forEach(([key, value]) => {
+ if (!aggregator[key]) {
+ aggregator[key] = value;
+ } else if (aggregator[key] !== value) {
+ if (allowedMultiValuesProperties.includes(key)) {
+ aggregator[key] = [].concat(aggregator[key], value);
+ } else {
+ // eslint-disable-next-line no-console
+ console.warn(`Key "${key}" in the ${type} manifest must be the same for every variant on the page.`);
+ }
+ }
+ });
+ return aggregator;
+ }, {});
+}
- const pluginOptions = { ...DEFAULT_OPTIONS, ...(options || {}) };
- const experiment = context.getMetadata(pluginOptions.experimentsMetaTag);
- if (!experiment) {
- return false;
- }
- const variants = context.getMetadata('instant-experiment')
- || context.getMetadata(`${pluginOptions.experimentsMetaTag}-variants`);
- let experimentConfig;
- try {
- experimentConfig = await getConfig(experiment, variants, pluginOptions, context);
- } catch (err) {
- // eslint-disable-next-line no-console
- console.error('Invalid experiment config.', err);
- }
- if (!experimentConfig || !isValidExperimentationConfig(experimentConfig)) {
- // eslint-disable-next-line no-console
- console.warn('Invalid experiment config. Please review your metadata, sheet and parser.');
- return false;
+/**
+ * Parses the experiment configuration from the metadata
+ */
+async function getExperimentConfig(pluginOptions, metadata, overrides) {
+ const id = toClassName(metadata.value || metadata.experiment);
+ if (!id) {
+ return null;
}
- const usp = new URLSearchParams(window.location.search);
- const forcedVariant = usp.has(pluginOptions.experimentsQueryParameter)
- ? usp.get(pluginOptions.experimentsQueryParameter).split('/')[1]
- : null;
- if (!experimentConfig.run && !forcedVariant) {
- // eslint-disable-next-line no-console
- console.warn('Experiment will not run. It is either not active or its configured audiences are not resolved.');
- return false;
+ let pages = metadata.variants || metadata.url;
+
+ // Backward compatibility
+ if (!pages) {
+ pages = getMetadata('instant-experiment');
}
- // eslint-disable-next-line no-console
- console.debug(`running experiment (${window.hlx.experiment.id}) -> ${window.hlx.experiment.selectedVariant}`);
-
- if (experimentConfig.selectedVariant === experimentConfig.variantNames[0]) {
- document.body.classList.add(`experiment-${context.toClassName(experimentConfig.id)}`);
- document.body.classList.add(`variant-${context.toClassName(experimentConfig.selectedVariant)}`);
- context.sampleRUM('experiment', {
- source: experimentConfig.id,
- target: experimentConfig.selectedVariant,
- });
- return false;
+ if (metadata.audience) {
+ metadata.audiences = metadata.audience;
}
- const { pages } = experimentConfig.variants[experimentConfig.selectedVariant];
+ const nbOfVariants = Number(pages);
+ pages = Number.isNaN(nbOfVariants)
+ ? stringToArray(pages).map((p) => new URL(p.trim(), window.location).pathname)
+ : new Array(nbOfVariants).fill(window.location.pathname);
if (!pages.length) {
- return false;
+ return null;
}
- const currentPath = window.location.pathname;
- const control = experimentConfig.variants[experimentConfig.variantNames[0]];
- const index = control.pages.indexOf(currentPath);
- if (index < 0) {
- return false;
- }
+ const audiences = stringToArray(metadata.audiences).map(toClassName);
- // Fullpage content experiment
- document.body.classList.add(`experiment-${context.toClassName(experimentConfig.id)}`);
- let result;
- if (pages[index] !== currentPath) {
- result = await replaceInner(pages[index], document.querySelector('main'));
- } else {
- result = currentPath;
- }
- 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-${context.toClassName(result ? experimentConfig.selectedVariant : experimentConfig.variantNames[0])}`);
- context.sampleRUM('experiment', {
- source: experimentConfig.id,
- target: result ? experimentConfig.selectedVariant : experimentConfig.variantNames[0],
- });
- return result;
-}
+ const splits = metadata.split
+ // custom split
+ ? stringToArray(metadata.split).map((i) => parseFloat(i) / 100)
+ // even split
+ : [...new Array(pages.length)].map(() => 1 / (pages.length + 1));
-export async function runCampaign(document, options, context) {
- if (isBot()) {
- return false;
- }
+ const variantNames = [];
+ variantNames.push('control');
+ stringToArray(getMetadata("variants-name")).forEach((v) => {
+ if (variantNames.length <= pages.length) {
+ variantNames.push(v);
+ } else{
+ console.log(`Variant name "${v}" is ignored: Number of variants names is more than the number of variants`);
+ }
+ });
- const pluginOptions = { ...DEFAULT_OPTIONS, ...options };
- const usp = new URLSearchParams(window.location.search);
- const campaign = (usp.has(pluginOptions.campaignsQueryParameter)
- ? context.toClassName(usp.get(pluginOptions.campaignsQueryParameter))
- : null)
- || (usp.has('utm_campaign') ? context.toClassName(usp.get('utm_campaign')) : null);
- if (!campaign) {
- return false;
- }
+ const variants = {};
+ variants.control = {
+ percentageSplit: '',
+ pages: [window.location.pathname],
+ label: 'Control',
+ };
- let audiences = context.getMetadata(`${pluginOptions.campaignsMetaTagPrefix}-audience`);
- let resolvedAudiences = null;
- if (audiences) {
- audiences = audiences.split(',').map(context.toClassName);
- resolvedAudiences = await getResolvedAudiences(audiences, pluginOptions, context);
- if (!!resolvedAudiences && !resolvedAudiences.length) {
- return false;
+ pages.forEach((page, i) => {
+ const vname =
+ variantNames.length > i + 1
+ ? variantNames[i + 1]
+ : `challenger-${i + 1}`;
+ if (variantNames.length <= i + 1) {
+ variantNames.push(vname);
}
- }
+ variants[vname] = {
+ percentageSplit: `${splits[i].toFixed(4)}`,
+ pages: [page],
+ blocks: [],
+ label: `Challenger ${i + 1}`,
+ };
+ });
+ inferEmptyPercentageSplits(Object.values(variants));
- const allowedCampaigns = context.getAllMetadata(pluginOptions.campaignsMetaTagPrefix);
- if (!Object.keys(allowedCampaigns).includes(campaign)) {
- return false;
- }
+ const resolvedAudiences = await getResolvedAudiences(
+ audiences,
+ pluginOptions,
+ );
- const urlString = allowedCampaigns[campaign];
- if (!urlString) {
- return false;
- }
+ const startDate = metadata.startDate ? new Date(metadata.startDate) : null;
+ const endDate = metadata.endDate ? new Date(metadata.endDate) : null;
+
+ const config = {
+ id,
+ label: metadata.name || `Experiment ${metadata.value || metadata.experiment}`,
+ status: metadata.status || 'active',
+ audiences,
+ endDate,
+ resolvedAudiences,
+ startDate,
+ variants,
+ variantNames,
+ };
+
+ config.run = (
+ // experiment is active or forced
+ (['active', 'on', 'true'].includes(toClassName(config.status)) || overrides.value)
+ // experiment has resolved audiences if configured
+ && (!resolvedAudiences || resolvedAudiences.length)
+ // forced audience resolves if defined
+ && (!overrides.audience || audiences.includes(overrides.audience))
+ && (!startDate || startDate <= Date.now())
+ && (!endDate || endDate > Date.now())
+ );
- window.hlx.campaign = { selectedCampaign: campaign };
- if (resolvedAudiences) {
- window.hlx.campaign.resolvedAudiences = window.hlx.campaign;
+ if (!config.run) {
+ return config;
}
- try {
- const url = new URL(urlString);
- const result = await replaceInner(url.pathname, document.querySelector('main'));
- window.hlx.campaign.servedExperience = result || window.location.pathname;
- if (!result) {
- // eslint-disable-next-line no-console
- console.debug(`failed to serve campaign ${campaign}. Falling back to default content.`);
- }
- document.body.classList.add(`campaign-${campaign}`);
- context.sampleRUM('campaign', {
- source: window.location.href,
- target: result ? campaign : 'default',
- });
- return result;
- } catch (err) {
- // eslint-disable-next-line no-console
- console.error(err);
- return false;
+ const [, forcedVariant] = (Array.isArray(overrides.value)
+ ? overrides.value
+ : stringToArray(overrides.value))
+ .map((value) => value?.split('/'))
+ .find(([experiment]) => toClassName(experiment) === config.id) || [];
+ if (variantNames.includes(toClassName(forcedVariant))) {
+ config.selectedVariant = toClassName(forcedVariant);
+ } else if (overrides.variant && variantNames.includes(overrides.variant)) {
+ config.selectedVariant = toClassName(overrides.variant);
+ } else {
+ // eslint-disable-next-line import/extensions
+ const { ued } = await import('./ued.js');
+ const decision = ued.evaluateDecisionPolicy(toDecisionPolicy(config), {});
+ config.selectedVariant = decision.items[0].id;
}
+
+ return config;
+}
+/**
+ * Parses the campaign manifest.
+ */
+function parseExperimentManifest(entries) {
+ return Object.values(Object.groupBy(
+ entries.map((e) => depluralizeProps(e, ['experiment', 'variant', 'split'])),
+ ({ experiment }) => experiment,
+ )).map(aggregateEntries('experiment', ['split', 'url', 'variant']));
}
-export async function serveAudience(document, options, context) {
- if (isBot()) {
- return false;
+function getUrlFromExperimentConfig(config) {
+ return config.run
+ ? config.variants[config.selectedVariant].pages[0]
+ : null;
+}
+
+async function runExperiment(document, pluginOptions) {
+ return applyAllModifications(
+ pluginOptions.experimentsMetaTagPrefix,
+ pluginOptions.experimentsQueryParameter,
+ pluginOptions,
+ getExperimentConfig,
+ parseExperimentManifest,
+ getUrlFromExperimentConfig,
+ (el, config, result) => {
+ const { id, selectedVariant, variantNames } = config;
+ const variant = result ? selectedVariant : variantNames[0];
+ el.classList.add(`experiment-${toClassName(id)}`);
+ el.classList.add(`variant-${toClassName(variant)}`);
+ window.hlx?.rum?.sampleRUM('experiment', {
+ source: id,
+ target: variant,
+ });
+ document.dispatchEvent(new CustomEvent('aem:experimentation', {
+ detail: {
+ element: el,
+ type: 'experiment',
+ experiment: id,
+ variant,
+ },
+ }));
+ },
+ );
+}
+
+/**
+ * Parses the campaign configuration from the metadata
+ */
+async function getCampaignConfig(pluginOptions, metadata, overrides) {
+ if (!Object.keys(metadata).length || (Object.keys(metadata).length === 1 && metadata.manifest)) {
+ return null;
}
- const pluginOptions = { ...DEFAULT_OPTIONS, ...(options || {}) };
- const configuredAudiences = context.getAllMetadata(pluginOptions.audiencesMetaTagPrefix);
- if (!Object.keys(configuredAudiences).length) {
- return false;
+ // Check UTM parameters
+ let campaign = overrides.value;
+ if (!campaign) {
+ const usp = new URLSearchParams(window.location.search);
+ if (usp.has('utm_campaign')) {
+ campaign = toClassName(usp.get('utm_campaign'));
+ }
+ } else {
+ campaign = toClassName(campaign);
+ }
+
+ if (metadata.audience) {
+ metadata.audiences = metadata.audience;
}
- const audiences = await getResolvedAudiences(
- Object.keys(configuredAudiences).map(context.toClassName),
+ const audiences = stringToArray(metadata.audiences).map(toClassName);
+ const resolvedAudiences = await getResolvedAudiences(
+ audiences,
pluginOptions,
- context,
);
- if (!audiences || !audiences.length) {
- return false;
+ if (resolvedAudiences && !resolvedAudiences.length) {
+ return null;
}
- const usp = new URLSearchParams(window.location.search);
- const forcedAudience = usp.has(pluginOptions.audiencesQueryParameter)
- ? context.toClassName(usp.get(pluginOptions.audiencesQueryParameter))
- : null;
-
- const selectedAudience = forcedAudience || audiences[0];
- const urlString = configuredAudiences[selectedAudience];
- if (!urlString) {
- return false;
- }
+ const configuredCampaigns = Object.fromEntries(Object.entries(metadata.campaigns || metadata)
+ .filter(([key]) => !['audience', 'audiences'].includes(key)));
- window.hlx.audience = { selectedAudience };
+ return {
+ audiences,
+ configuredCampaigns,
+ resolvedAudiences,
+ selectedCampaign: campaign && (metadata.campaigns || metadata)[campaign]
+ ? campaign
+ : null,
+ };
+}
- try {
- const url = new URL(urlString);
- const result = await replaceInner(url.pathname, document.querySelector('main'));
- window.hlx.audience.servedExperience = result || window.location.pathname;
- if (!result) {
- // eslint-disable-next-line no-console
- console.debug(`failed to serve audience ${selectedAudience}. Falling back to default content.`);
- }
- document.body.classList.add(audiences.map((audience) => `audience-${audience}`));
- context.sampleRUM('audiences', {
- source: window.location.href,
- target: result ? forcedAudience || audiences.join(',') : 'default',
+/**
+ * Parses the campaign manifest.
+ */
+function parseCampaignManifest(entries) {
+ return Object.values(Object.groupBy(
+ entries.map((e) => depluralizeProps(e, ['campaign'])),
+ ({ selector }) => selector,
+ ))
+ .map(aggregateEntries('campaign', ['campaign', 'url']))
+ .map((e) => {
+ const campaigns = e.campaign;
+ delete e.campaign;
+ e.campaigns = {};
+ campaigns.forEach((a, i) => {
+ e.campaigns[toClassName(a)] = e.url[i];
+ });
+ delete e.url;
+ return e;
});
- return result;
- } catch (err) {
- // eslint-disable-next-line no-console
- console.error(err);
- return false;
- }
}
-window.hlx.patchBlockConfig?.push((config) => {
- const { experiment } = window.hlx;
-
- // No experiment is running
- if (!experiment || !experiment.run) {
- return config;
- }
+function getUrlFromCampaignConfig(config) {
+ return config.selectedCampaign
+ ? config.configuredCampaigns[config.selectedCampaign]
+ : null;
+}
- // The current experiment does not modify the block
- if (experiment.selectedVariant === experiment.variantNames[0]
- || !experiment.variants[experiment.variantNames[0]].blocks
- || !experiment.variants[experiment.variantNames[0]].blocks.includes(config.blockName)) {
- return config;
- }
+async function runCampaign(document, pluginOptions) {
+ return applyAllModifications(
+ pluginOptions.campaignsMetaTagPrefix,
+ pluginOptions.campaignsQueryParameter,
+ pluginOptions,
+ getCampaignConfig,
+ parseCampaignManifest,
+ getUrlFromCampaignConfig,
+ (el, config, result) => {
+ const { selectedCampaign = 'default' } = config;
+ const campaign = result ? toClassName(selectedCampaign) : 'default';
+ el.classList.add(`campaign-${campaign}`);
+ window.hlx?.rum?.sampleRUM('campaign', {
+ source: el.className,
+ target: campaign,
+ });
+ document.dispatchEvent(new CustomEvent('aem:experimentation', {
+ detail: {
+ element: el,
+ type: 'campaign',
+ campaign,
+ },
+ }));
+ },
+ );
+}
- // The current experiment does not modify the block code
- const variant = experiment.variants[experiment.selectedVariant];
- if (!variant.blocks.length) {
- return config;
+/**
+ * Parses the audience configuration from the metadata
+ */
+async function getAudienceConfig(pluginOptions, metadata, overrides) {
+ if (!Object.keys(metadata).length || (Object.keys(metadata).length === 1 && metadata.manifest)) {
+ return null;
}
- let index = experiment.variants[experiment.variantNames[0]].blocks.indexOf('');
- if (index < 0) {
- index = experiment.variants[experiment.variantNames[0]].blocks.indexOf(config.blockName);
- }
- if (index < 0) {
- index = experiment.variants[experiment.variantNames[0]].blocks.indexOf(`/blocks/${config.blockName}`);
- }
- if (index < 0) {
- return config;
+ const configuredAudiencesName = Object.keys(metadata.audiences || metadata).map(toClassName);
+ const resolvedAudiences = await getResolvedAudiences(
+ configuredAudiencesName,
+ pluginOptions,
+ );
+ if (resolvedAudiences && !resolvedAudiences.length) {
+ return false;
}
- let origin = '';
- let path;
- if (/^https?:\/\//.test(variant.blocks[index])) {
- const url = new URL(variant.blocks[index]);
- // Experimenting from a different branch
- if (url.origin !== window.location.origin) {
- origin = url.origin;
- }
- // Experimenting from a block path
- if (url.pathname !== '/') {
- path = url.pathname;
- } else {
- path = `/blocks/${config.blockName}`;
- }
- } else { // Experimenting from a different branch on the same branch
- path = `/blocks/${variant.blocks[index]}`;
- }
- if (!origin && !path) {
- return config;
- }
+ const selectedAudience = overrides.audience || resolvedAudiences[0];
- const { codeBasePath } = window.hlx;
return {
- ...config,
- cssPath: `${origin}${codeBasePath}${path}/${config.blockName}.css`,
- jsPath: `${origin}${codeBasePath}${path}/${config.blockName}.js`,
- };
-});
-
-let isAdjusted = false;
-function adjustedRumSamplingRate(checkpoint, options, context) {
- const pluginOptions = { ...DEFAULT_OPTIONS, ...(options || {}) };
- return (data) => {
- if (!window.hlx.rum.isSelected && !isAdjusted) {
- isAdjusted = true;
- // adjust sampling rate based on project config …
- window.hlx.rum.weight = Math.min(
- window.hlx.rum.weight,
- // … but limit it to the 10% sampling at max to avoid losing anonymization
- // and reduce burden on the backend
- Math.max(pluginOptions.rumSamplingRate, MAX_SAMPLING_RATE),
- );
- window.hlx.rum.isSelected = (window.hlx.rum.random * window.hlx.rum.weight < 1);
- if (window.hlx.rum.isSelected) {
- context.sampleRUM(checkpoint, data);
- }
- }
- return true;
+ configuredAudiences: metadata.audiences || metadata,
+ resolvedAudiences,
+ selectedAudience,
};
}
-export async function loadEager(document, options, context) {
- context.sampleRUM.always.on('audiences', adjustedRumSamplingRate('audiences', options, context));
- context.sampleRUM.always.on('campaign', adjustedRumSamplingRate('campaign', options, context));
- context.sampleRUM.always.on('experiment', adjustedRumSamplingRate('experiment', options, context));
- let res = await runCampaign(document, options, context);
- if (!res) {
- res = await runExperiment(document, options, context);
- }
- if (!res) {
- res = await serveAudience(document, options, context);
- }
+/**
+ * Parses the audience manifest.
+ */
+function parseAudienceManifest(entries) {
+ return Object.values(Object.groupBy(
+ entries.map((e) => depluralizeProps(e, ['audience'])),
+ ({ selector }) => selector,
+ ))
+ .map(aggregateEntries('audience', ['audience', 'url']))
+ .map((e) => {
+ const audiences = e.audience;
+ delete e.audience;
+ e.audiences = {};
+ audiences.forEach((a, i) => {
+ e.audiences[toClassName(a)] = e.url[i];
+ });
+ delete e.url;
+ return e;
+ });
}
-export async function loadLazy(document, options, context) {
- const pluginOptions = {
- ...DEFAULT_OPTIONS,
- ...(options || {}),
- };
+function getUrlFromAudienceConfig(config) {
+ return config.selectedAudience
+ ? config.configuredAudiences[config.selectedAudience]
+ : null;
+}
+
+async function serveAudience(document, pluginOptions) {
+ return applyAllModifications(
+ pluginOptions.audiencesMetaTagPrefix,
+ pluginOptions.audiencesQueryParameter,
+ pluginOptions,
+ getAudienceConfig,
+ parseAudienceManifest,
+ getUrlFromAudienceConfig,
+ (el, config, result) => {
+ const { selectedAudience = 'default' } = config;
+ const audience = result ? toClassName(selectedAudience) : 'default';
+ el.classList.add(`audience-${audience}`);
+ window.hlx?.rum?.sampleRUM('audience', {
+ source: el.className,
+ target: audience,
+ });
+ document.dispatchEvent(new CustomEvent('aem:experimentation', {
+ detail: {
+ element: el,
+ type: 'audience',
+ audience,
+ },
+ }));
+ },
+ );
+}
+
+export async function loadEager(document, options = {}) {
+ const pluginOptions = { ...DEFAULT_OPTIONS, ...options };
+ setDebugMode(window.location, pluginOptions);
+
+ const ns = window.aem || window.hlx || {};
+ ns.audiences = await serveAudience(document, pluginOptions);
+ ns.experiments = await runExperiment(document, pluginOptions);
+ ns.campaigns = await runCampaign(document, pluginOptions);
+
+ // Backward compatibility
+ ns.experiment = ns.experiments.find((e) => e.type === 'page');
+ ns.audience = ns.audiences.find((e) => e.type === 'page');
+ ns.campaign = ns.campaigns.find((e) => e.type === 'page');
+}
+
+export async function loadLazy(document, options = {}) {
+ const pluginOptions = { ...DEFAULT_OPTIONS, ...options };
// do not show the experimentation pill on prod domains
- if (window.location.hostname.endsWith('.live')
- || (typeof options.isProd === 'function' && options.isProd())
- || (options.prodHost
- && (options.prodHost === window.location.host
- || options.prodHost === window.location.hostname
- || options.prodHost === window.location.origin))) {
+ if (!isDebugEnabled) {
return;
}
// eslint-disable-next-line import/no-cycle
const preview = await import('./preview.js');
- preview.default(document, pluginOptions, { ...context, getResolvedAudiences });
+ preview.default(document, pluginOptions);
}
diff --git a/plugins/experimentation/src/preview.css b/plugins/experimentation/src/preview.css
index 9b02fbd7..3257e95b 100644
--- a/plugins/experimentation/src/preview.css
+++ b/plugins/experimentation/src/preview.css
@@ -24,7 +24,7 @@
}
.hlx-preview-overlay {
- z-index: 99;
+ z-index: 99999;
position: fixed;
color: #eee;
font-size: 1rem;
@@ -104,9 +104,14 @@
.hlx-popup {
position: absolute;
+ display: grid;
+ grid-template:
+ "header" min-content
+ "content" 1fr;
bottom: 6.5em;
left: 50%;
transform: translateX(-50%);
+ max-height: calc(100vh - 100px - var(--nav-height, 100px));
max-width: calc(100vw - 2em);
min-width: calc(300px - 2em);
background-color: #444;
@@ -128,6 +133,7 @@
.hlx-popup-header {
display: grid;
+ grid-area: header;
grid-template:
"label actions"
"description actions"
@@ -137,6 +143,13 @@
padding: 24px 16px;
}
+.hlx-popup-items {
+ overflow-y: auto;
+ grid-area: content;
+ scrollbar-gutter: stable;
+ scrollbar-width: thin;
+}
+
.hlx-popup-header-label {
grid-area: label;
}
@@ -174,7 +187,7 @@
height: 0;
position: absolute;
border-left: 15px solid transparent;
- border-right: 15px solid transparent;
+ border-right: 15px solid transparent;
border-top: 15px solid #444;
bottom: -15px;
right: 50%;
@@ -198,13 +211,13 @@
.hlx-popup-item {
display: grid;
grid-template:
- "label actions"
+ "label actions"
"description actions"
/ 1fr min-content;
margin: 1em;
padding: 1em;
border-radius: 1em;
- gap: 1em;
+ gap: .5em 1em;
}
.hlx-popup-item-label {
diff --git a/plugins/experimentation/src/preview.js b/plugins/experimentation/src/preview.js
index 5c871eb8..e69ca6c5 100644
--- a/plugins/experimentation/src/preview.js
+++ b/plugins/experimentation/src/preview.js
@@ -9,6 +9,12 @@
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/
+// eslint-disable-next-line import/no-cycle
+import {
+ debug,
+ getMetadata,
+ toClassName,
+} from './index.js';
const DOMAIN_KEY_NAME = 'aem-domainkey';
@@ -17,7 +23,7 @@ class AemExperimentationBar extends HTMLElement {
// Create a shadow root
const shadow = this.attachShadow({ mode: 'open' });
- const cssPath = new URL(new Error().stack.split('\n')[2].match(/[a-z]+:[^:]+/)[0]).pathname.replace('preview.js', 'preview.css');
+ const cssPath = new URL(new Error().stack.split('\n')[2].match(/[a-z]+?:\/\/.*?\/[^:]+/)[0]).pathname.replace('preview.js', 'preview.css');
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = cssPath;
@@ -25,15 +31,26 @@ class AemExperimentationBar extends HTMLElement {
shadow.querySelector('.hlx-preview-overlay').removeAttribute('hidden');
};
shadow.append(link);
+ shadow.append(link);
const el = document.createElement('div');
el.className = 'hlx-preview-overlay';
- el.setAttribute('hidden', true);
shadow.append(el);
}
}
customElements.define('aem-experimentation-bar', AemExperimentationBar);
+function watchForAddedExperiences(ns, cb) {
+ let { length } = ns;
+ window.setInterval(() => {
+ if (length !== ns.length) {
+ const diff = length - ns.length;
+ length = ns.length;
+ ns.slice(diff).map((c) => cb(c));
+ }
+ }, 1000);
+}
+
function createPreviewOverlay() {
const overlay = document.createElement('aem-experimentation-bar');
return overlay;
@@ -43,7 +60,19 @@ function getOverlay() {
let overlay = document.querySelector('aem-experimentation-bar')?.shadowRoot.children[1];
if (!overlay) {
const el = createPreviewOverlay();
- document.body.append(el);
+ const style = document.createElement('style');
+ style.textContent = `
+ .hlx-highlight {
+ --highlight-size: .5rem;
+
+ outline-color: #888;
+ outline-offset: calc(-1 * var(--highlight-size));
+ outline-style: dashed;
+ outline-width: var(--highlight-size);
+ background-color: #8882;
+ }`;
+ el.prepend(style);
+ document.body.prepend(el);
[, overlay] = el.shadowRoot.children;
}
return overlay;
@@ -107,14 +136,25 @@ function createPopupDialog(header, items = []) {
return popup;
}
-function createPopupButton(label, header, items) {
+function createPopupButton(label, header, items, eventListeners = {}) {
const button = createButton(label);
const popup = createPopupDialog(header, items);
button.innerHTML += '';
button.append(popup);
- button.addEventListener('click', () => {
+ button.addEventListener('click', (ev) => {
+ if (ev.target.closest('.hlx-popup')) {
+ return;
+ }
+ getOverlay().querySelectorAll('.hlx-badge .hlx-popup:not(.hlx-hidden)').forEach((el) => {
+ if (el !== popup) {
+ el.classList.toggle('hlx-hidden', true);
+ }
+ });
popup.classList.toggle('hlx-hidden');
});
+ Object.entries(eventListeners).forEach(([evt, listener]) => {
+ button.addEventListener(evt, listener);
+ });
return button;
}
@@ -134,7 +174,7 @@ function createToggleButton(label) {
return button;
}
-const percentformat = new Intl.NumberFormat('en-US', { style: 'percent', maximumSignificantDigits: 2 });
+const percentformat = new Intl.NumberFormat('en-US', { style: 'percent', maximumSignificantDigits: 3 });
const countformat = new Intl.NumberFormat('en-US', { maximumSignificantDigits: 2 });
const significanceformat = {
format: (value) => {
@@ -205,6 +245,7 @@ async function fetchRumData(experiment, options) {
}
resultsURL.searchParams.set('domainkey', options.domainKey);
resultsURL.searchParams.set('experiment', experiment);
+ resultsURL.searchParams.set('conversioncheckpoint', options.conversionName);
const response = await fetch(resultsURL.href);
if (!response.ok) {
@@ -285,7 +326,7 @@ async function fetchRumData(experiment, options) {
function populatePerformanceMetrics(div, config, {
richVariants, totals, variantsAsNums, winner,
-}) {
+}, conversionName) {
// add summary
const summary = div.querySelector('.hlx-info');
summary.innerHTML = `Showing results for ${bigcountformat.format(totals.total_experimentations)} visits and ${bigcountformat.format(totals.total_conversions)} conversions: `;
@@ -301,10 +342,10 @@ function populatePerformanceMetrics(div, config, {
// add traffic allocation to control and each variant
config.variantNames.forEach((variantName, index) => {
- const variantDiv = document.querySelectorAll('.hlx-popup-item')[index];
+ const variantDiv = getOverlay().querySelectorAll('.hlx-popup-item')[index];
const percentage = variantDiv.querySelector('.percentage');
percentage.innerHTML = `
- ${bigcountformat.format(richVariants[variantName].variant_conversions)} clicks /
+ ${bigcountformat.format(richVariants[variantName].variant_conversions)} ${conversionName} events /
${bigcountformat.format(richVariants[variantName].variant_experimentations)} visits
(${percentformat.format(richVariants[variantName].variant_experimentations / totals.total_experimentations)} split)
`;
@@ -312,11 +353,11 @@ function populatePerformanceMetrics(div, config, {
// add click rate and significance to each variant
variantsAsNums.forEach((result) => {
- const variant = document.querySelectorAll('.hlx-popup-item')[config.variantNames.indexOf(result.variant)];
+ const variant = getOverlay().querySelectorAll('.hlx-popup-item')[config.variantNames.indexOf(result.variant)];
if (variant) {
const performance = variant.querySelector('.performance');
performance.innerHTML = `
- click rate: ${percentformat.format(result.variant_conversion_rate)}
+ ${conversionName} conversion rate: ${percentformat.format(result.variant_conversion_rate)}
vs. ${percentformat.format(result.control_conversion_rate)}
${significanceformat.format(result.p_value)}
`;
@@ -328,16 +369,18 @@ function populatePerformanceMetrics(div, config, {
* Create Badge if a Page is enlisted in a AEM Experiment
* @return {Object} returns a badge or empty string
*/
-async function decorateExperimentPill(overlay, options, context) {
- const config = window?.hlx?.experiment;
- const experiment = context.toClassName(context.getMetadata(options.experimentsMetaTag));
- if (!experiment || !config) {
+async function decorateExperimentPill({ el, config }, container, options) {
+ if (!config) {
return;
}
// eslint-disable-next-line no-console
- console.log('preview experiment', experiment);
+ debug('preview experiment', config.id);
const domainKey = window.localStorage.getItem(DOMAIN_KEY_NAME);
+ const conversionName = (el.tagName === 'MAIN'
+ ? toClassName(getMetadata('conversion-name'))
+ : el.dataset.conversionName
+ ) || 'click';
const pill = createPopupButton(
`Experiment: ${config.id}`,
{
@@ -348,8 +391,8 @@ async function decorateExperimentPill(overlay, options, context) {
${config.resolvedAudiences ? ', ' : ''}
${config.resolvedAudiences && config.resolvedAudiences.length ? config.resolvedAudiences[0] : ''}
${config.resolvedAudiences && !config.resolvedAudiences.length ? 'No audience resolved' : ''}
- ${config.variants[config.variantNames[0]].blocks.length ? ', Blocks: ' : ''}
- ${config.variants[config.variantNames[0]].blocks.join(',')}
+ ${config.variants[config.variantNames[0]].blocks?.length ? ', Blocks: ' : ''}
+ ${config.variants[config.variantNames[0]].blocks?.join(',') || ''}
How is it going?
`,
actions: [
@@ -364,14 +407,14 @@ async function decorateExperimentPill(overlay, options, context) {
);
if (key && key.match(/[a-f0-9-]+/)) {
window.localStorage.setItem(DOMAIN_KEY_NAME, key);
- const performanceMetrics = await fetchRumData(experiment, {
+ const performanceMetrics = await fetchRumData(config.id, {
...options,
domainKey: key,
});
if (performanceMetrics === null) {
return;
}
- populatePerformanceMetrics(pill, config, performanceMetrics);
+ populatePerformanceMetrics(pill, config, performanceMetrics, conversionName);
} else if (key === '') {
window.localStorage.removeItem(DOMAIN_KEY_NAME);
}
@@ -379,18 +422,41 @@ async function decorateExperimentPill(overlay, options, context) {
},
],
},
- config.variantNames.map((vname) => createVariant(experiment, vname, config, options)),
+ config.variantNames.map((vname) => createVariant(config.id, vname, config, options)),
+ {
+ click: (ev) => {
+ if (!ev.target.querySelector('.hlx-hidden')) {
+ el.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+ }
+ },
+ mouseenter: () => { el.classList.add('hlx-highlight'); },
+ mouseleave: () => {
+ document.querySelectorAll('.hlx-highlight')
+ .forEach((e) => e.classList.remove('hlx-highlight'));
+ },
+ },
);
if (config.run) {
- pill.classList.add(`is-${context.toClassName(config.status)}`);
+ pill.classList.add(`is-${toClassName(config.status)}`);
}
- overlay.append(pill);
-
- const performanceMetrics = await fetchRumData(experiment, { ...options, domainKey });
+ container.append(pill);
+ const performanceMetrics = await fetchRumData(config.id, {
+ ...options, conversionName, domainKey,
+ });
if (performanceMetrics === null) {
return;
}
- populatePerformanceMetrics(pill, config, performanceMetrics);
+ populatePerformanceMetrics(pill, config, performanceMetrics, conversionName);
+}
+
+async function decorateExperimentPills(container, options) {
+ const ns = window.aem || window.hlx;
+ if (!ns?.experiments) {
+ return null;
+ }
+
+ watchForAddedExperiences(ns.experiments, (c) => decorateExperimentPill(c, container, options));
+ return Promise.all(ns.experiments.map((c) => decorateExperimentPill(c, container, options)));
}
function createCampaign(campaign, isSelected, options) {
@@ -412,53 +478,64 @@ function createCampaign(campaign, isSelected, options) {
* Create Badge if a Page is enlisted in a AEM Campaign
* @return {Object} returns a badge or empty string
*/
-async function decorateCampaignPill(overlay, options, context) {
- const campaigns = context.getAllMetadata(options.campaignsMetaTagPrefix);
- if (!Object.keys(campaigns).length) {
+async function decorateCampaignPill({ el, config }, container, options) {
+ if (!config) {
return;
}
-
- const usp = new URLSearchParams(window.location.search);
- const forcedAudience = usp.has(options.audiencesQueryParameter)
- ? context.toClassName(usp.get(options.audiencesQueryParameter))
- : null;
- const audiences = campaigns.audience?.split(',').map(context.toClassName) || [];
- const resolvedAudiences = await context.getResolvedAudiences(audiences, options);
- const isActive = forcedAudience
- ? audiences.includes(forcedAudience)
- : (!resolvedAudiences || !!resolvedAudiences.length);
- const campaign = (usp.has(options.campaignsQueryParameter)
- ? context.toClassName(usp.get(options.campaignsQueryParameter))
- : null)
- || (usp.has('utm_campaign') ? context.toClassName(usp.get('utm_campaign')) : null);
const pill = createPopupButton(
- `Campaign: ${campaign || 'default'}`,
+ `Campaign: ${config.selectedCampaign || 'default'}`,
{
label: 'Campaigns on this page:',
description: `
- ${audiences.length && resolvedAudiences?.length ? `Audience: ${resolvedAudiences[0]}` : ''}
- ${audiences.length && !resolvedAudiences?.length ? 'No audience resolved' : ''}
- ${!audiences.length || !resolvedAudiences ? 'No audience configured' : ''}
+ ${config.audiences.length && config.resolvedAudiences?.length ? `Audience: ${config.resolvedAudiences[0]}` : ''}
+ ${config.audiences.length && !config.resolvedAudiences?.length ? 'No audience resolved' : ''}
+ ${!config.audiences.length || !config.resolvedAudiences ? 'No audience configured' : ''}
`,
},
[
- createCampaign('default', !campaign || !isActive, options),
- ...Object.keys(campaigns)
+ createCampaign('default', !config.selectedCampaign || config.selectedCampaign === 'default', options),
+ ...Object.keys(config.configuredCampaigns)
.filter((c) => c !== 'audience')
- .map((c) => createCampaign(c, isActive && context.toClassName(campaign) === c, options)),
+ .map((c) => createCampaign(c, config.selectedCampaign === c, options)),
],
+ {
+ click: (ev) => {
+ if (!ev.target.querySelector('.hlx-hidden')) {
+ el.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+ }
+ },
+ mouseenter: () => { el.classList.add('hlx-highlight'); },
+ mouseleave: () => {
+ document.querySelectorAll('.hlx-highlight')
+ .forEach((e) => e.classList.remove('hlx-highlight'));
+ },
+ },
);
- if (campaign && isActive) {
+ if (config.selectedCampaign) {
pill.classList.add('is-active');
}
- overlay.append(pill);
+ container.append(pill);
+}
+
+async function decorateCampaignPills(container, options) {
+ const ns = window.aem || window.hlx;
+ if (!ns?.campaigns) {
+ return null;
+ }
+
+ watchForAddedExperiences(ns.campaigns, (c) => decorateCampaignPill(c, container, options));
+ return Promise.all(ns.campaigns.map((c) => decorateCampaignPill(c, container, options)));
}
function createAudience(audience, isSelected, options) {
const url = new URL(window.location.href);
- url.searchParams.set(options.audiencesQueryParameter, audience);
+ if (audience !== 'default') {
+ url.searchParams.set(options.audiencesQueryParameter, audience);
+ } else {
+ url.searchParams.delete(options.audiencesQueryParameter);
+ }
return {
label: `${audience}`,
@@ -471,46 +548,67 @@ function createAudience(audience, isSelected, options) {
* Create Badge if a Page is enlisted in a AEM Audiences
* @return {Object} returns a badge or empty string
*/
-async function decorateAudiencesPill(overlay, options, context) {
- const audiences = context.getAllMetadata(options.audiencesMetaTagPrefix);
- if (!Object.keys(audiences).length || !Object.keys(options.audiences).length) {
+async function decorateAudiencesPill({ el, config }, container, options) {
+ if (!config) {
+ return;
+ }
+ const configuredAudienceNames = Object.keys(config.configuredAudiences);
+ if (!Object.keys(config.configuredAudiences).length || !Object.keys(options.audiences).length) {
return;
}
- const resolvedAudiences = await context.getResolvedAudiences(
- Object.keys(audiences),
- options,
- context,
- );
const pill = createPopupButton(
- 'Audiences',
+ `Audience: ${config.selectedAudience || 'default'}`,
{
label: 'Audiences for this page:',
},
[
- createAudience('default', !resolvedAudiences.length || resolvedAudiences[0] === 'default', options),
- ...Object.keys(audiences)
+ createAudience('default', !config.selectedAudience || config.selectedAudience === 'default', options),
+ ...configuredAudienceNames
.filter((a) => a !== 'audience')
- .map((a) => createAudience(a, resolvedAudiences && resolvedAudiences[0] === a, options)),
+ .map((a) => createAudience(a, config.selectedAudience === a, options)),
],
+ {
+ click: (ev) => {
+ if (!ev.target.querySelector('.hlx-hidden')) {
+ el.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+ }
+ },
+ mouseenter: () => { el.classList.add('hlx-highlight'); },
+ mouseleave: () => {
+ document.querySelectorAll('.hlx-highlight')
+ .forEach((e) => e.classList.remove('hlx-highlight'));
+ },
+ },
);
- if (resolvedAudiences.length) {
+ if (config.selectedAudience) {
pill.classList.add('is-active');
}
- overlay.append(pill);
+ container.append(pill);
+}
+
+async function decorateAudiencesPills(container, options) {
+ const ns = window.aem || window.hlx;
+ if (!ns?.audiences) {
+ return null;
+ }
+
+ watchForAddedExperiences(ns.audiences, (c) => decorateAudiencesPill(c, container, options));
+ return Promise.all(ns.audiences.map((c) => decorateAudiencesPill(c, container, options)));
}
/**
* Decorates Preview mode badges and overlays
* @return {Object} returns a badge or empty string
*/
-export default async function decoratePreviewMode(document, options, context) {
+export default async function decoratePreviewMode(document, options) {
try {
- const overlay = getOverlay(options);
- await decorateAudiencesPill(overlay, options, context);
- await decorateCampaignPill(overlay, options, context);
- await decorateExperimentPill(overlay, options, context);
+ const overlay = getOverlay();
+
+ await decorateAudiencesPills(overlay, options);
+ await decorateCampaignPills(overlay, options);
+ await decorateExperimentPills(overlay, options);
} catch (e) {
// eslint-disable-next-line no-console
console.log(e);
diff --git a/plugins/experimentation/src/ued.js b/plugins/experimentation/src/ued.js
index d28e91c3..4d4e3a39 100644
--- a/plugins/experimentation/src/ued.js
+++ b/plugins/experimentation/src/ued.js
@@ -9,6 +9,7 @@
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/
+/* eslint-disable */
var storage = window.sessionStorage;
diff --git a/plugins/experimentation/tests/audiences.test.js b/plugins/experimentation/tests/audiences.test.js
new file mode 100644
index 00000000..08e4b436
--- /dev/null
+++ b/plugins/experimentation/tests/audiences.test.js
@@ -0,0 +1,194 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import { test, expect } from '@playwright/test';
+import { track } from './coverage.js';
+import { goToAndRunAudience, waitForDomEvent } from './utils.js';
+
+track(test);
+
+test.describe('Page-level audiences', () => {
+ test('Replaces the page content with the variant.', async ({ page }) => {
+ await goToAndRunAudience(page, '/tests/fixtures/audiences/page-level');
+ expect(await page.locator('main').textContent()).toContain('Hello v1!');
+ await goToAndRunAudience(page, '/tests/fixtures/audiences/page-level--async');
+ expect(await page.locator('main').textContent()).toContain('Hello v2!');
+ });
+
+ test('Sets a class on the body for the main resolved audience.', async ({ page }) => {
+ await goToAndRunAudience(page, '/tests/fixtures/audiences/page-level');
+ expect(await page.locator('body').getAttribute('class')).not.toContain('audience-default');
+ expect(await page.locator('body').getAttribute('class')).toContain('audience-foo');
+ expect(await page.locator('body').getAttribute('class')).not.toContain('audience-bar');
+ });
+
+ test('Ignores empty audiences.', async ({ page }) => {
+ await goToAndRunAudience(page, '/tests/fixtures/audiences/page-level--empty');
+ expect(await page.locator('main').textContent()).toContain('Hello World!');
+ expect(await page.locator('body').getAttribute('class')).toContain('audience-default');
+ expect(await page.locator('body').getAttribute('class')).not.toContain('audience-foo');
+ expect(await page.locator('body').getAttribute('class')).not.toContain('audience-bar');
+ });
+
+ test('Controls the audience shown via query parameters.', async ({ page }) => {
+ await goToAndRunAudience(page, '/tests/fixtures/audiences/page-level?audience=foo');
+ expect(await page.locator('main').textContent()).toContain('Hello v1!');
+ await goToAndRunAudience(page, '/tests/fixtures/audiences/page-level?audience=bar');
+ expect(await page.locator('main').textContent()).toContain('Hello v2!');
+ });
+
+ test('Ignores invalid audiences.', async ({ page }) => {
+ await goToAndRunAudience(page, '/tests/fixtures/audiences/page-level--invalid');
+ expect(await page.locator('main').textContent()).toContain('Hello v2!');
+ });
+
+ test('Ignores invalid audience references in the query parameters.', async ({ page }) => {
+ await goToAndRunAudience(page, '/tests/fixtures/audiences/page-level?audience=baz');
+ expect(await page.locator('main').textContent()).toContain('Hello World!');
+ });
+
+ test('Ignores invalid variant urls.', async ({ page }) => {
+ await goToAndRunAudience(page, '/tests/fixtures/audiences/page-level--invalid-url');
+ expect(await page.locator('main').textContent()).toContain('Hello World!');
+ });
+
+ test('Tracks the audience in RUM.', async ({ page }) => {
+ await page.addInitScript(() => {
+ window.rumCalls = [];
+ window.hlx = { rum: { sampleRUM: (...args) => window.rumCalls.push(args) } };
+ });
+ await goToAndRunAudience(page, '/tests/fixtures/audiences/page-level');
+ expect(await page.evaluate(() => window.rumCalls)).toContainEqual([
+ 'audience',
+ expect.objectContaining({
+ source: 'audience-foo',
+ target: 'foo',
+ }),
+ ]);
+ });
+
+ test('Exposes the audiences in a JS API.', async ({ page }) => {
+ await goToAndRunAudience(page, '/tests/fixtures/audiences/page-level');
+ expect(await page.evaluate(() => window.hlx.audiences)).toContainEqual(
+ expect.objectContaining({
+ type: 'page',
+ config: expect.objectContaining({
+ configuredAudiences: {
+ foo: '/tests/fixtures/audiences/variant-1',
+ bar: '/tests/fixtures/audiences/variant-2',
+ },
+ resolvedAudiences: ['foo', 'bar'],
+ selectedAudience: 'foo',
+ }),
+ servedExperience: '/tests/fixtures/audiences/variant-1',
+ }),
+ );
+ });
+
+ test('triggers a DOM event with the audience detail', async ({ page }) => {
+ const fn = await waitForDomEvent(page, 'aem:experimentation');
+ await page.goto('/tests/fixtures/audiences/page-level');
+ expect(await page.evaluate(fn)).toEqual({
+ type: 'audience',
+ element: await page.evaluate(() => document.body),
+ audience: 'foo',
+ });
+ });
+});
+
+test.describe('Section-level audiences', () => {
+ test('Replaces the section content with the variant.', async ({ page }) => {
+ await goToAndRunAudience(page, '/tests/fixtures/audiences/section-level');
+ expect(await page.locator('main>div').textContent()).toContain('Hello v2!');
+ });
+
+ test('Sets classes on the section for the audience.', async ({ page }) => {
+ await goToAndRunAudience(page, '/tests/fixtures/audiences/section-level');
+ expect(await page.locator('main>div').getAttribute('class')).toContain('audience-bar');
+ await goToAndRunAudience(page, '/tests/fixtures/audiences/section-level?audience=foo');
+ expect(await page.locator('main>div').getAttribute('class')).toContain('audience-foo');
+ });
+
+ test('Exposes the audiences in a JS API.', async ({ page }) => {
+ await goToAndRunAudience(page, '/tests/fixtures/audiences/section-level');
+ expect(await page.evaluate(() => window.hlx.audiences)).toContainEqual(
+ expect.objectContaining({
+ type: 'section',
+ config: expect.objectContaining({
+ configuredAudiences: {
+ foo: `${await page.evaluate(() => window.location.origin)}/tests/fixtures/audiences/variant-1`,
+ bar: '/tests/fixtures/audiences/variant-2',
+ },
+ resolvedAudiences: ['bar'],
+ selectedAudience: 'bar',
+ }),
+ servedExperience: '/tests/fixtures/audiences/variant-2',
+ }),
+ );
+ });
+
+ test('triggers a DOM event with the audience detail', async ({ page }) => {
+ const fn = await waitForDomEvent(page, 'aem:experimentation');
+ await page.goto('/tests/fixtures/audiences/section-level');
+ expect(await page.evaluate(fn)).toEqual({
+ type: 'audience',
+ element: await page.evaluate(() => document.querySelector('.section')),
+ audience: 'bar',
+ });
+ });
+});
+
+test.describe('Fragment-level audiences', () => {
+ test('Replaces the fragment content with the variant.', async ({ page }) => {
+ await goToAndRunAudience(page, '/tests/fixtures/audiences/fragment-level');
+ expect(await page.locator('.fragment').textContent()).toContain('Hello v1!');
+ });
+
+ test('Supports plural format for manifest keys.', async ({ page }) => {
+ await goToAndRunAudience(page, '/tests/fixtures/audiences/fragment-level--alt');
+ expect(await page.locator('.fragment').textContent()).toContain('Hello v1!');
+ });
+
+ test('Ignores invalid manifest url.', async ({ page }) => {
+ await goToAndRunAudience(page, '/tests/fixtures/audiences/fragment-level--invalid-url');
+ expect(await page.locator('.fragment').textContent()).toContain('Hello World!');
+ });
+
+ test('Replaces the async fragment content with the variant.', async ({ page }) => {
+ await goToAndRunAudience(page, '/tests/fixtures/audiences/fragment-level--async');
+ expect(await page.locator('.fragment').textContent()).toContain('Hello v2!');
+ });
+
+ test('Sets classes on the section for the audience.', async ({ page }) => {
+ await goToAndRunAudience(page, '/tests/fixtures/audiences/fragment-level');
+ expect(await page.locator('.fragment').getAttribute('class')).toContain('audience-foo');
+ await goToAndRunAudience(page, '/tests/fixtures/audiences/fragment-level?audience=bar');
+ expect(await page.locator('.fragment').getAttribute('class')).toContain('audience-bar');
+ });
+
+ test('Exposes the audiences in a JS API.', async ({ page }) => {
+ await goToAndRunAudience(page, '/tests/fixtures/audiences/fragment-level');
+ expect(await page.evaluate(() => window.hlx.audiences)).toContainEqual(
+ expect.objectContaining({
+ type: 'fragment',
+ config: expect.objectContaining({
+ configuredAudiences: {
+ foo: '/tests/fixtures/audiences/variant-1',
+ bar: '/tests/fixtures/audiences/variant-2',
+ },
+ resolvedAudiences: ['foo'],
+ selectedAudience: 'foo',
+ }),
+ servedExperience: '/tests/fixtures/audiences/variant-1',
+ }),
+ );
+ });
+
+ test('triggers a DOM event with the audience detail', async ({ page }) => {
+ const fn = await waitForDomEvent(page, 'aem:experimentation');
+ await page.goto('/tests/fixtures/audiences/fragment-level');
+ expect(await page.evaluate(fn)).toEqual({
+ type: 'audience',
+ element: await page.evaluate(() => document.querySelector('.fragment')),
+ audience: 'foo',
+ });
+ });
+});
diff --git a/plugins/experimentation/tests/campaigns.test.js b/plugins/experimentation/tests/campaigns.test.js
new file mode 100644
index 00000000..2218febf
--- /dev/null
+++ b/plugins/experimentation/tests/campaigns.test.js
@@ -0,0 +1,206 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import { test, expect } from '@playwright/test';
+import { track } from './coverage.js';
+import { goToAndRunCampaign, waitForDomEvent } from './utils.js';
+
+track(test);
+
+test.describe('Page-level campaigns', () => {
+ test('Replaces the page content with the variant.', async ({ page }) => {
+ await goToAndRunCampaign(page, '/tests/fixtures/campaigns/page-level');
+ expect(await page.locator('main').textContent()).toContain('Hello World!');
+ await goToAndRunCampaign(page, '/tests/fixtures/campaigns/page-level?campaign=foo');
+ expect(await page.locator('main').textContent()).toContain('Hello v1!');
+ await goToAndRunCampaign(page, '/tests/fixtures/campaigns/page-level?campaign=bar');
+ expect(await page.locator('main').textContent()).toContain('Hello v2!');
+ });
+
+ test('Serves the campaign if the configured audience is resolved.', async ({ page }) => {
+ await page.addInitScript(() => {
+ window.AUDIENCES = { baz: () => false };
+ });
+ await goToAndRunCampaign(page, '/tests/fixtures/campaigns/page-level--audiences?campaign=foo');
+ expect(await page.locator('main').textContent()).toContain('Hello World!');
+ await page.addInitScript(() => {
+ window.AUDIENCES = { baz: () => true };
+ });
+ await goToAndRunCampaign(page, '/tests/fixtures/campaigns/page-level--audiences?campaign=foo');
+ expect(await page.locator('main').textContent()).toContain('Hello v1!');
+ });
+
+ test('Sets a class on the body for the active campaign.', async ({ page }) => {
+ await goToAndRunCampaign(page, '/tests/fixtures/campaigns/page-level');
+ expect(await page.locator('body').getAttribute('class')).toContain('campaign-default');
+ await goToAndRunCampaign(page, '/tests/fixtures/campaigns/page-level?campaign=foo');
+ expect(await page.locator('body').getAttribute('class')).toContain('campaign-foo');
+ await goToAndRunCampaign(page, '/tests/fixtures/campaigns/page-level?campaign=bar');
+ expect(await page.locator('body').getAttribute('class')).toContain('campaign-bar');
+ });
+
+ test('Ignores empty campaigns.', async ({ page }) => {
+ await goToAndRunCampaign(page, '/tests/fixtures/campaigns/page-level--empty?campaign=foo');
+ expect(await page.locator('main').textContent()).toContain('Hello World!');
+ expect(await page.locator('body').getAttribute('class')).toContain('campaign-default');
+ });
+
+ test('Controls the campaign shown via UTM query parameters.', async ({ page }) => {
+ await goToAndRunCampaign(page, '/tests/fixtures/campaigns/page-level?utm_campaign=foo');
+ expect(await page.locator('main').textContent()).toContain('Hello v1!');
+ await goToAndRunCampaign(page, '/tests/fixtures/campaigns/page-level?utm_campaign=bar');
+ expect(await page.locator('main').textContent()).toContain('Hello v2!');
+ });
+
+ test('Ignores invalid campaigns references in the query parameters.', async ({ page }) => {
+ await goToAndRunCampaign(page, '/tests/fixtures/campaigns/page-level?campaign=baz');
+ expect(await page.locator('main').textContent()).toContain('Hello World!');
+ });
+
+ test('Ignores invalid variant urls.', async ({ page }) => {
+ await goToAndRunCampaign(page, '/tests/fixtures/campaigns/page-level--invalid-url?campaign=foo');
+ expect(await page.locator('main').textContent()).toContain('Hello World!');
+ });
+
+ test('Tracks the campaign in RUM.', async ({ page }) => {
+ await page.addInitScript(() => {
+ window.rumCalls = [];
+ window.hlx = { rum: { sampleRUM: (...args) => window.rumCalls.push(args) } };
+ });
+ await goToAndRunCampaign(page, '/tests/fixtures/campaigns/page-level?campaign=foo');
+ expect(await page.evaluate(() => window.rumCalls)).toContainEqual([
+ 'campaign',
+ expect.objectContaining({
+ source: 'campaign-foo',
+ target: 'foo',
+ }),
+ ]);
+ });
+
+ test('Exposes the campaign in a JS API.', async ({ page }) => {
+ await goToAndRunCampaign(page, '/tests/fixtures/campaigns/page-level?campaign=bar');
+ expect(await page.evaluate(() => window.hlx.campaigns)).toContainEqual(
+ expect.objectContaining({
+ type: 'page',
+ config: expect.objectContaining({
+ configuredCampaigns: {
+ foo: '/tests/fixtures/campaigns/variant-1',
+ bar: '/tests/fixtures/campaigns/variant-2',
+ },
+ selectedCampaign: 'bar',
+ }),
+ servedExperience: '/tests/fixtures/campaigns/variant-2',
+ }),
+ );
+ });
+
+ test('triggers a DOM event with the campaign detail', async ({ page }) => {
+ const fn = await waitForDomEvent(page, 'aem:experimentation');
+ await page.goto('/tests/fixtures/campaigns/page-level?campaign=bar');
+ expect(await page.evaluate(fn)).toEqual({
+ type: 'campaign',
+ element: await page.evaluate(() => document.body),
+ campaign: 'bar',
+ });
+ });
+});
+
+test.describe('Section-level campaigns', () => {
+ test('Replaces the section content with the variant.', async ({ page }) => {
+ await goToAndRunCampaign(page, '/tests/fixtures/campaigns/section-level?campaign=bar');
+ expect(await page.locator('main>div').textContent()).toContain('Hello v2!');
+ });
+
+ test('Sets classes on the section for the campaign.', async ({ page }) => {
+ await goToAndRunCampaign(page, '/tests/fixtures/campaigns/section-level?campaign=foo');
+ expect(await page.locator('main>div').getAttribute('class')).toContain('campaign-foo');
+ await goToAndRunCampaign(page, '/tests/fixtures/campaigns/section-level?campaign=bar');
+ expect(await page.locator('main>div').getAttribute('class')).toContain('campaign-bar');
+ });
+
+ test('Exposes the campaigns in a JS API.', async ({ page }) => {
+ await goToAndRunCampaign(page, '/tests/fixtures/campaigns/section-level?campaign=bar');
+ expect(await page.evaluate(() => window.hlx.campaigns)).toContainEqual(
+ expect.objectContaining({
+ type: 'section',
+ config: expect.objectContaining({
+ configuredCampaigns: {
+ foo: '/tests/fixtures/campaigns/variant-1',
+ bar: '/tests/fixtures/campaigns/variant-2',
+ },
+ selectedCampaign: 'bar',
+ }),
+ servedExperience: '/tests/fixtures/campaigns/variant-2',
+ }),
+ );
+ });
+
+ test('triggers a DOM event with the campaign detail', async ({ page }) => {
+ const fn = await waitForDomEvent(page, 'aem:experimentation');
+ await page.goto('/tests/fixtures/campaigns/section-level?campaign=bar');
+ expect(await page.evaluate(fn)).toEqual({
+ type: 'campaign',
+ element: await page.evaluate(() => document.querySelector('.section')),
+ campaign: 'bar',
+ });
+ });
+});
+
+test.describe('Fragment-level campaigns', () => {
+ test('Replaces the fragment content with the variant.', async ({ page }) => {
+ await goToAndRunCampaign(page, '/tests/fixtures/campaigns/fragment-level?campaign=foo');
+ expect(await page.locator('.fragment').textContent()).toContain('Hello v1!');
+ });
+
+ test('Supports plural format for manifest keys.', async ({ page }) => {
+ await goToAndRunCampaign(page, '/tests/fixtures/campaigns/fragment-level--alt?campaign=foo');
+ expect(await page.locator('.fragment').textContent()).toContain('Hello v1!');
+ });
+
+ test('Ignores invalid manifest url.', async ({ page }) => {
+ await goToAndRunCampaign(page, '/tests/fixtures/campaigns/fragment-level--invalid-url?campaign=foo');
+ expect(await page.locator('.fragment').textContent()).toContain('Hello World!');
+ });
+
+ test('Sets classes on the section for the campaign.', async ({ page }) => {
+ await goToAndRunCampaign(page, '/tests/fixtures/campaigns/fragment-level?campaign=foo');
+ expect(await page.locator('.fragment').getAttribute('class')).toContain('campaign-foo');
+ await goToAndRunCampaign(page, '/tests/fixtures/campaigns/fragment-level?campaign=bar');
+ expect(await page.locator('.fragment').getAttribute('class')).toContain('campaign-bar');
+ });
+
+ test('Exposes the campaigns in a JS API.', async ({ page }) => {
+ await goToAndRunCampaign(page, '/tests/fixtures/campaigns/fragment-level?campaign=foo');
+ expect(await page.evaluate(() => window.hlx.campaigns)).toContainEqual(
+ expect.objectContaining({
+ type: 'fragment',
+ config: expect.objectContaining({
+ configuredCampaigns: {
+ foo: '/tests/fixtures/campaigns/variant-1',
+ bar: '/tests/fixtures/campaigns/variant-2',
+ },
+ selectedCampaign: 'foo',
+ }),
+ servedExperience: '/tests/fixtures/campaigns/variant-1',
+ }),
+ );
+ });
+
+ test('triggers a DOM event with the campaign detail', async ({ page }) => {
+ const fn = await waitForDomEvent(page, 'aem:experimentation');
+ await page.goto('/tests/fixtures/campaigns/fragment-level?campaign=foo');
+ expect(await page.evaluate(fn)).toEqual({
+ type: 'campaign',
+ element: await page.evaluate(() => document.querySelector('.fragment')),
+ campaign: 'foo',
+ });
+ });
+});
+
+test.describe('Backward Compatibility with v1', () => {
+ test('Support the old "audience" metadata.', async ({ page }) => {
+ await page.addInitScript(() => {
+ window.AUDIENCES = { baz: () => true };
+ });
+ await goToAndRunCampaign(page, '/tests/fixtures/campaigns/page-level--backward-compatibility--audience?campaign=foo');
+ expect(await page.locator('main').textContent()).toContain('Hello v1!');
+ });
+});
diff --git a/plugins/experimentation/tests/coverage.js b/plugins/experimentation/tests/coverage.js
new file mode 100644
index 00000000..939df135
--- /dev/null
+++ b/plugins/experimentation/tests/coverage.js
@@ -0,0 +1,37 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import MCR from 'monocart-coverage-reports';
+
+const coverageReport = MCR({
+ name: 'AEM Experimentation Plugin Coverage Report',
+ outputDir: './coverage',
+ reports: ['v8', 'console-details', 'codecov'],
+ entryFilter: {
+ '**/src/ued.js': false,
+ '**/src/**': true,
+ },
+});
+
+export async function start() {
+ // Nothing to do here
+}
+
+export async function end() {
+ await coverageReport.generate();
+}
+
+export function track(test) {
+ test.beforeEach(async ({ page }) => {
+ await Promise.all([
+ page.coverage.startJSCoverage({ resetOnNavigation: false }),
+ page.coverage.startCSSCoverage({ resetOnNavigation: false }),
+ ]);
+ });
+
+ test.afterEach(async ({ page }) => {
+ const [jsCoverage, cssCoverage] = await Promise.all([
+ page.coverage.stopJSCoverage(),
+ page.coverage.stopCSSCoverage(),
+ ]);
+ await coverageReport.add([...jsCoverage, ...cssCoverage]);
+ });
+}
diff --git a/plugins/experimentation/tests/experiments.test.js b/plugins/experimentation/tests/experiments.test.js
new file mode 100644
index 00000000..883ce274
--- /dev/null
+++ b/plugins/experimentation/tests/experiments.test.js
@@ -0,0 +1,321 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import { test, expect } from '@playwright/test';
+import { track } from './coverage.js';
+import { goToAndRunExperiment, waitForDomEvent } from './utils.js';
+
+track(test);
+
+test.describe('Page-level experiments', () => {
+ test('Replaces the page content with the variant.', async ({ page }) => {
+ await goToAndRunExperiment(page, '/tests/fixtures/experiments/page-level');
+ expect(await page.locator('main').textContent()).toMatch(/Hello (World|v1|v2)!/);
+ });
+
+ test('Visiting the page multiple times yields the same variant', async ({ page }) => {
+ await goToAndRunExperiment(page, '/tests/fixtures/experiments/page-level');
+ const text = await page.locator('main').textContent();
+ await goToAndRunExperiment(page, '/tests/fixtures/experiments/page-level');
+ expect(await page.locator('main').textContent()).toEqual(text);
+ await goToAndRunExperiment(page, '/tests/fixtures/experiments/page-level');
+ expect(await page.locator('main').textContent()).toEqual(text);
+ });
+
+ test('does not run inactive experiments.', async ({ page }) => {
+ await goToAndRunExperiment(page, '/tests/fixtures/experiments/page-level--inactive');
+ expect(await page.locator('main').textContent()).toEqual('Hello World!');
+ await goToAndRunExperiment(page, '/tests/fixtures/experiments/page-level--inactive?experiment=foo/challenger-1');
+ expect(await page.locator('main').textContent()).toEqual('Hello v1!');
+ });
+
+ test('Serves the variant if the configured audience is resolved.', async ({ page }) => {
+ await page.addInitScript(() => {
+ window.AUDIENCES = { bar: () => false };
+ });
+ await goToAndRunExperiment(page, '/tests/fixtures/experiments/page-level--audiences?experiment=foo/challenger-1');
+ expect(await page.locator('main').textContent()).toEqual('Hello World!');
+ await page.addInitScript(() => {
+ window.AUDIENCES = { bar: () => true };
+ });
+ await goToAndRunExperiment(page, '/tests/fixtures/experiments/page-level--audiences?experiment=foo/challenger-1');
+ expect(await page.locator('main').textContent()).toEqual('Hello v1!');
+ await page.addInitScript(() => {
+ window.AUDIENCES = { bar: async () => Promise.resolve(true) };
+ });
+ await goToAndRunExperiment(page, '/tests/fixtures/experiments/page-level--audiences?experiment=foo/challenger-2');
+ expect(await page.locator('main').textContent()).toEqual('Hello v2!');
+ });
+
+ test('Supports the "stard-date" and "end-date" metadata.', async ({ page }) => {
+ await goToAndRunExperiment(page, '/tests/fixtures/experiments/page-level--time-bound');
+ expect(await page.locator('main').textContent()).toMatch(/Hello (World|v1|v2)!/);
+ await goToAndRunExperiment(page, '/tests/fixtures/experiments/page-level--time-bound-start');
+ expect(await page.locator('main').textContent()).toEqual('Hello World!');
+ await goToAndRunExperiment(page, '/tests/fixtures/experiments/page-level--time-bound-end');
+ expect(await page.locator('main').textContent()).toEqual('Hello World!');
+ });
+
+ test('Supports the "split" metadata.', async ({ page }) => {
+ await goToAndRunExperiment(page, '/tests/fixtures/experiments/page-level--split');
+ expect(await page.locator('main').textContent()).toEqual('Hello v2!');
+ });
+
+ test('Sets classes on the body for the experiment.', async ({ page }) => {
+ await goToAndRunExperiment(page, '/tests/fixtures/experiments/page-level?experiment=foo/control');
+ expect(await page.locator('body').getAttribute('class')).toContain('experiment-foo');
+ expect(await page.locator('body').getAttribute('class')).toContain('variant-control');
+ await goToAndRunExperiment(page, '/tests/fixtures/experiments/page-level?experiment=foo/challenger-1');
+ expect(await page.locator('body').getAttribute('class')).toContain('experiment-foo');
+ expect(await page.locator('body').getAttribute('class')).toContain('variant-challenger-1');
+ await goToAndRunExperiment(page, '/tests/fixtures/experiments/page-level?experiment=foo/challenger-2');
+ expect(await page.locator('body').getAttribute('class')).toContain('experiment-foo');
+ expect(await page.locator('body').getAttribute('class')).toContain('variant-challenger-2');
+ });
+
+ test('Ignores empty experiments.', async ({ page }) => {
+ await goToAndRunExperiment(page, '/tests/fixtures/experiments/page-level--empty?experiment=foo/challenger-1');
+ expect(await page.locator('main').textContent()).toEqual('Hello World!');
+ expect(await page.locator('body').getAttribute('class')).not.toContain('experiment-foo');
+ expect(await page.locator('body').getAttribute('class')).not.toContain('variant-control');
+
+ await goToAndRunExperiment(page, '/tests/fixtures/experiments/page-level--empty2?experiment=foo/challenger-1');
+ expect(await page.locator('main').textContent()).toEqual('Hello World!');
+ expect(await page.locator('body').getAttribute('class')).not.toContain('experiment-foo');
+ expect(await page.locator('body').getAttribute('class')).not.toContain('variant-control');
+ });
+
+ test('Ignores invalid experiment references in the query parameters.', async ({ page }) => {
+ await goToAndRunExperiment(page, '/tests/fixtures/experiments/page-level?experiment=foo/invalid');
+ expect(await page.locator('main').textContent()).toMatch(/Hello (World|v1|v2)!/);
+ });
+
+ test('Ignores invalid variant urls.', async ({ page }) => {
+ await goToAndRunExperiment(page, '/tests/fixtures/experiments/page-level--invalid-url?experiment=foo/challenger-1');
+ expect(await page.locator('main').textContent()).toEqual('Hello World!');
+ expect(await page.locator('body').getAttribute('class')).toContain('experiment-foo');
+ expect(await page.locator('body').getAttribute('class')).toContain('variant-control');
+ });
+
+ test('Supports code experiments.', async ({ page }) => {
+ await goToAndRunExperiment(page, '/tests/fixtures/experiments/page-level--code?experiment=foo/challenger-1');
+ expect(await page.locator('main').textContent()).toEqual('Hello World!');
+ expect(await page.locator('body').getAttribute('class')).toContain('experiment-foo');
+ expect(await page.locator('body').getAttribute('class')).toContain('variant-challenger-1');
+ });
+
+ test('Tracks the experiment in RUM.', async ({ page }) => {
+ await page.addInitScript(() => {
+ window.rumCalls = [];
+ window.hlx = { rum: { sampleRUM: (...args) => window.rumCalls.push(args) } };
+ });
+ await goToAndRunExperiment(page, '/tests/fixtures/experiments/page-level');
+ expect(await page.evaluate(() => window.rumCalls)).toContainEqual([
+ 'experiment',
+ expect.objectContaining({
+ source: 'foo',
+ target: expect.stringMatching(/control|challenger-1|challenger-2/),
+ }),
+ ]);
+ });
+
+ test('Exposes the experiment in a JS API.', async ({ page }) => {
+ await goToAndRunExperiment(page, '/tests/fixtures/experiments/page-level');
+ expect(await page.evaluate(() => window.hlx.experiments)).toContainEqual(
+ expect.objectContaining({
+ type: 'page',
+ config: expect.objectContaining({
+ id: 'foo',
+ run: true,
+ selectedVariant: expect.stringMatching(/control|challenger-1|challenger-2/),
+ status: 'active',
+ variants: {
+ control: expect.objectContaining({ percentageSplit: '0.3334' }),
+ 'challenger-1': expect.objectContaining({ percentageSplit: '0.3333' }),
+ 'challenger-2': expect.objectContaining({ percentageSplit: '0.3333' }),
+ },
+ }),
+ servedExperience: expect.stringContaining('/tests/fixtures/experiments/page-level'),
+ }),
+ );
+ });
+
+ test('Controls the variant shown via query parameters.', async ({ page }) => {
+ await goToAndRunExperiment(page, '/tests/fixtures/experiments/page-level?experiment=foo/control');
+ expect(await page.locator('main').textContent()).toEqual('Hello World!');
+ await goToAndRunExperiment(page, '/tests/fixtures/experiments/page-level?experiment=foo/challenger-1');
+ expect(await page.locator('main').textContent()).toEqual('Hello v1!');
+ });
+
+ test('supports overriding the shown experiment and variant via query parameters.', async ({ page }) => {
+ await goToAndRunExperiment(page, '/tests/fixtures/experiments/page-level?experiment=foo/challenger-2&experiment=bar/challenger-1');
+ expect(await page.locator('main').textContent()).toEqual('Hello v2!');
+ await goToAndRunExperiment(page, '/tests/fixtures/experiments/page-level?experiment=foo&experiment-variant=challenger-1');
+ expect(await page.locator('main').textContent()).toEqual('Hello v1!');
+ await goToAndRunExperiment(page, '/tests/fixtures/experiments/page-level--audiences?experiment=foo&experiment-variant=challenger-2&audience=bar');
+ expect(await page.locator('main').textContent()).toEqual('Hello v2!');
+ });
+
+ test('triggers a DOM event with the experiment detail', async ({ page }) => {
+ const fn = await waitForDomEvent(page, 'aem:experimentation');
+ await page.goto('/tests/fixtures/experiments/page-level?experiment=foo&experiment-variant=challenger-1');
+ expect(await page.evaluate(fn)).toEqual({
+ type: 'experiment',
+ element: await page.evaluate(() => document.body),
+ experiment: 'foo',
+ variant: 'challenger-1',
+ });
+ });
+});
+
+test.describe('Section-level experiments', () => {
+ test('Replaces the section content with the variant.', async ({ page }) => {
+ await goToAndRunExperiment(page, '/tests/fixtures/experiments/section-level');
+ expect(await page.locator('main>div').textContent()).toMatch(/Hello (World|v1|v2)!/);
+ await goToAndRunExperiment(page, '/tests/fixtures/experiments/section-level?experiment=bar/control');
+ expect(await page.locator('main>div').textContent()).toContain('Hello World!');
+ await goToAndRunExperiment(page, '/tests/fixtures/experiments/section-level?experiment=bar/challenger-1');
+ expect(await page.locator('main>div').textContent()).toContain('Hello v1!');
+ await goToAndRunExperiment(page, '/tests/fixtures/experiments/section-level?experiment=bar/challenger-2');
+ expect(await page.locator('main>div').textContent()).toContain('Hello v2!');
+ });
+
+ test('Sets classes on the section for the experiment.', async ({ page }) => {
+ await goToAndRunExperiment(page, '/tests/fixtures/experiments/section-level?experiment=bar/control');
+ expect(await page.locator('main>div').getAttribute('class')).toContain('experiment-bar');
+ expect(await page.locator('main>div').getAttribute('class')).toContain('variant-control');
+ await goToAndRunExperiment(page, '/tests/fixtures/experiments/section-level?experiment=bar/challenger-1');
+ expect(await page.locator('main>div').getAttribute('class')).toContain('experiment-bar');
+ expect(await page.locator('main>div').getAttribute('class')).toContain('variant-challenger-1');
+ await goToAndRunExperiment(page, '/tests/fixtures/experiments/section-level?experiment=bar/challenger-2');
+ expect(await page.locator('main>div').getAttribute('class')).toContain('experiment-bar');
+ expect(await page.locator('main>div').getAttribute('class')).toContain('variant-challenger-2');
+ });
+
+ test('Exposes the experiment in a JS API.', async ({ page }) => {
+ await goToAndRunExperiment(page, '/tests/fixtures/experiments/section-level');
+ expect(await page.evaluate(() => window.hlx.experiments)).toContainEqual(
+ expect.objectContaining({
+ type: 'section',
+ config: expect.objectContaining({
+ id: 'bar',
+ run: true,
+ selectedVariant: expect.stringMatching(/control|challenger-1|challenger-2/),
+ status: 'active',
+ variants: {
+ control: expect.objectContaining({ percentageSplit: '0.3334' }),
+ 'challenger-1': expect.objectContaining({ percentageSplit: '0.3333' }),
+ 'challenger-2': expect.objectContaining({ percentageSplit: '0.3333' }),
+ },
+ }),
+ servedExperience: expect.stringMatching(/\/tests\/fixtures\/experiments\/(page|section)-level/),
+ }),
+ );
+ });
+
+ test('triggers a DOM event with the experiment detail', async ({ page }) => {
+ const fn = await waitForDomEvent(page, 'aem:experimentation');
+ await page.goto('/tests/fixtures/experiments/section-level?experiment=bar/challenger-2');
+ expect(await page.evaluate(fn)).toEqual({
+ type: 'experiment',
+ element: await page.evaluate(() => document.querySelector('.section')),
+ experiment: 'bar',
+ variant: 'challenger-2',
+ });
+ });
+});
+
+test.describe('Fragment-level experiments', () => {
+ test('Replaces the fragment content with the variant.', async ({ page }) => {
+ await goToAndRunExperiment(page, '/tests/fixtures/experiments/fragment-level');
+ expect(await page.locator('.fragment').first().textContent()).toMatch(/Hello (World|v1|v2)!/);
+ await goToAndRunExperiment(page, '/tests/fixtures/experiments/fragment-level?experiment=baz/control');
+ expect(await page.locator('.fragment').first().textContent()).toContain('Hello World!');
+ await goToAndRunExperiment(page, '/tests/fixtures/experiments/fragment-level?experiment=baz/challenger-1');
+ expect(await page.locator('.fragment').first().textContent()).toContain('Hello v1!');
+ await goToAndRunExperiment(page, '/tests/fixtures/experiments/fragment-level?experiment=baz/challenger-2');
+ expect(await page.locator('.fragment').first().textContent()).toContain('Hello v2!');
+ });
+
+ test('Supports plural format for manifest keys.', async ({ page }) => {
+ await goToAndRunExperiment(page, '/tests/fixtures/experiments/fragment-level--alt?experiment=baz/control');
+ expect(await page.locator('.fragment').first().textContent()).toContain('Hello World!');
+ await goToAndRunExperiment(page, '/tests/fixtures/experiments/fragment-level--alt?experiment=baz/challenger-1');
+ expect(await page.locator('.fragment').first().textContent()).toContain('Hello v1!');
+ await goToAndRunExperiment(page, '/tests/fixtures/experiments/fragment-level--alt?experiment=baz/challenger-2');
+ expect(await page.locator('.fragment').first().textContent()).toContain('Hello v2!');
+ });
+
+ test('Ignores invalid manifest url.', async ({ page }) => {
+ await goToAndRunExperiment(page, '/tests/fixtures/experiments/fragment-level--invalid-url');
+ expect(await page.locator('.fragment').first().textContent()).toContain('Hello World!');
+ });
+
+ test('Replaces the async fragment content with the variant.', async ({ page }) => {
+ await goToAndRunExperiment(page, '/tests/fixtures/experiments/fragment-level--async');
+ expect(await page.locator('.fragment').first().textContent()).toMatch(/Hello (World|v1|v2)!/);
+ await goToAndRunExperiment(page, '/tests/fixtures/experiments/fragment-level--async?experiment=baz/control');
+ expect(await page.locator('.fragment').first().textContent()).toContain('Hello World!');
+ await goToAndRunExperiment(page, '/tests/fixtures/experiments/fragment-level--async?experiment=baz/challenger-1');
+ expect(await page.locator('.fragment').first().textContent()).toContain('Hello v1!');
+ await goToAndRunExperiment(page, '/tests/fixtures/experiments/fragment-level--async?experiment=baz/challenger-2');
+ expect(await page.locator('.fragment').first().textContent()).toContain('Hello v2!');
+ });
+
+ test('Sets classes on the section for the experiment.', async ({ page }) => {
+ await goToAndRunExperiment(page, '/tests/fixtures/experiments/fragment-level?experiment=baz/control');
+ expect(await page.locator('.fragment').first().getAttribute('class')).toContain('experiment-baz');
+ expect(await page.locator('.fragment').first().getAttribute('class')).toContain('variant-control');
+ await goToAndRunExperiment(page, '/tests/fixtures/experiments/fragment-level?experiment=baz/challenger-1');
+ expect(await page.locator('.fragment').first().getAttribute('class')).toContain('experiment-baz');
+ expect(await page.locator('.fragment').first().getAttribute('class')).toContain('variant-challenger-1');
+ await goToAndRunExperiment(page, '/tests/fixtures/experiments/fragment-level?experiment=baz/challenger-2');
+ expect(await page.locator('.fragment').first().getAttribute('class')).toContain('experiment-baz');
+ expect(await page.locator('.fragment').first().getAttribute('class')).toContain('variant-challenger-2');
+ });
+
+ test('Exposes the experiment in a JS API.', async ({ page }) => {
+ await goToAndRunExperiment(page, '/tests/fixtures/experiments/fragment-level');
+ expect(await page.evaluate(() => window.hlx.experiments)).toContainEqual(
+ expect.objectContaining({
+ type: 'fragment',
+ config: expect.objectContaining({
+ id: 'baz',
+ run: true,
+ selectedVariant: expect.stringMatching(/control|challenger-1|challenger-2/),
+ status: 'active',
+ variants: {
+ control: expect.objectContaining({ percentageSplit: '0.3334' }),
+ 'challenger-1': expect.objectContaining({ percentageSplit: '0.3333' }),
+ 'challenger-2': expect.objectContaining({ percentageSplit: '0.3333' }),
+ },
+ }),
+ servedExperience: expect.stringMatching(/\/tests\/fixtures\/experiments\/(fragment|section)-level/),
+ }),
+ );
+ });
+
+ test('triggers a DOM event with the experiment detail', async ({ page }) => {
+ const fn = await waitForDomEvent(page, 'aem:experimentation');
+ await page.goto('/tests/fixtures/experiments/fragment-level?experiment=baz/challenger-1');
+ expect(await page.evaluate(fn)).toEqual({
+ type: 'experiment',
+ element: await page.evaluate(() => document.querySelector('.fragment')),
+ experiment: 'baz',
+ variant: 'challenger-1',
+ });
+ });
+});
+
+test.describe('Backward Compatibility with v1', () => {
+ test('Support the old "instant-experiment" metadata.', async ({ page }) => {
+ await goToAndRunExperiment(page, '/tests/fixtures/experiments/page-level--backward-compatibility--instant-experiment?experiment=foo/challenger-1');
+ expect(await page.locator('main').textContent()).toEqual('Hello v1!');
+ });
+
+ test('Support the old "audience" metadata.', async ({ page }) => {
+ await page.addInitScript(() => {
+ window.AUDIENCES = { bar: () => true };
+ });
+ await goToAndRunExperiment(page, '/tests/fixtures/experiments/page-level--backward-compatibility--audience?experiment=foo/challenger-1');
+ expect(await page.locator('main').textContent()).toEqual('Hello v1!');
+ });
+});
diff --git a/plugins/experimentation/tests/fixtures/aem.js b/plugins/experimentation/tests/fixtures/aem.js
new file mode 100644
index 00000000..61527b42
--- /dev/null
+++ b/plugins/experimentation/tests/fixtures/aem.js
@@ -0,0 +1,759 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+/* eslint-env browser */
+
+/**
+ * log RUM if part of the sample.
+ * @param {string} checkpoint identifies the checkpoint in funnel
+ * @param {Object} data additional data for RUM sample
+ * @param {string} data.source DOM node that is the source of a checkpoint event,
+ * identified by #id or .classname
+ * @param {string} data.target subject of the checkpoint event,
+ * for instance the href of a link, or a search term
+ */
+function sampleRUM(checkpoint, data = {}) {
+ const SESSION_STORAGE_KEY = 'aem-rum';
+ sampleRUM.baseURL = sampleRUM.baseURL
+ || new URL(window.RUM_BASE == null ? 'https://rum.hlx.page' : window.RUM_BASE, window.location);
+ sampleRUM.defer = sampleRUM.defer || [];
+ const defer = (fnname) => {
+ sampleRUM[fnname] = sampleRUM[fnname] || ((...args) => sampleRUM.defer.push({ fnname, args }));
+ };
+ sampleRUM.drain = sampleRUM.drain
+ || ((dfnname, fn) => {
+ sampleRUM[dfnname] = fn;
+ sampleRUM.defer
+ .filter(({ fnname }) => dfnname === fnname)
+ .forEach(({ fnname, args }) => sampleRUM[fnname](...args));
+ });
+ sampleRUM.always = sampleRUM.always || [];
+ sampleRUM.always.on = (chkpnt, fn) => {
+ sampleRUM.always[chkpnt] = fn;
+ };
+ sampleRUM.on = (chkpnt, fn) => {
+ sampleRUM.cases[chkpnt] = fn;
+ };
+ defer('observe');
+ defer('cwv');
+ try {
+ window.hlx = window.hlx || {};
+ if (!window.hlx.rum) {
+ const usp = new URLSearchParams(window.location.search);
+ const weight = usp.get('rum') === 'on' ? 1 : 100; // with parameter, weight is 1. Defaults to 100.
+ const id = Array.from({ length: 75 }, (_, i) => String.fromCharCode(48 + i))
+ .filter((a) => /\d|[A-Z]/i.test(a))
+ .filter(() => Math.random() * 75 > 70)
+ .join('');
+ const random = Math.random();
+ const isSelected = random * weight < 1;
+ const firstReadTime = window.performance ? window.performance.timeOrigin : Date.now();
+ const urlSanitizers = {
+ full: () => window.location.href,
+ origin: () => window.location.origin,
+ path: () => window.location.href.replace(/\?.*$/, ''),
+ };
+ // eslint-disable-next-line max-len
+ const rumSessionStorage = sessionStorage.getItem(SESSION_STORAGE_KEY)
+ ? JSON.parse(sessionStorage.getItem(SESSION_STORAGE_KEY))
+ : {};
+ // eslint-disable-next-line max-len
+ rumSessionStorage.pages = (rumSessionStorage.pages ? rumSessionStorage.pages : 0)
+ + 1
+ /* noise */ + (Math.floor(Math.random() * 20) - 10);
+ sessionStorage.setItem(SESSION_STORAGE_KEY, JSON.stringify(rumSessionStorage));
+ // eslint-disable-next-line object-curly-newline, max-len
+ window.hlx.rum = {
+ weight,
+ id,
+ random,
+ isSelected,
+ firstReadTime,
+ sampleRUM,
+ sanitizeURL: urlSanitizers[window.hlx.RUM_MASK_URL || 'path'],
+ rumSessionStorage,
+ };
+ }
+
+ const { weight, id, firstReadTime } = window.hlx.rum;
+ if (window.hlx && window.hlx.rum && window.hlx.rum.isSelected) {
+ const knownProperties = [
+ 'weight',
+ 'id',
+ 'referer',
+ 'checkpoint',
+ 't',
+ 'source',
+ 'target',
+ 'cwv',
+ 'CLS',
+ 'FID',
+ 'LCP',
+ 'INP',
+ 'TTFB',
+ ];
+ const sendPing = (pdata = data) => {
+ // eslint-disable-next-line max-len
+ const t = Math.round(
+ window.performance ? window.performance.now() : Date.now() - firstReadTime,
+ );
+ // eslint-disable-next-line object-curly-newline, max-len, no-use-before-define
+ const body = JSON.stringify(
+ {
+ weight, id, referer: window.hlx.rum.sanitizeURL(), checkpoint, t, ...data,
+ },
+ knownProperties,
+ );
+ const url = new URL(`.rum/${weight}`, sampleRUM.baseURL).href;
+ navigator.sendBeacon(url, body);
+ // eslint-disable-next-line no-console
+ console.debug(`ping:${checkpoint}`, pdata);
+ };
+ sampleRUM.cases = sampleRUM.cases || {
+ load: () => sampleRUM('pagesviewed', { source: window.hlx.rum.rumSessionStorage.pages }) || true,
+ cwv: () => sampleRUM.cwv(data) || true,
+ lazy: () => {
+ // use classic script to avoid CORS issues
+ const script = document.createElement('script');
+ script.src = new URL(
+ '.rum/@adobe/helix-rum-enhancer@^1/src/index.js',
+ sampleRUM.baseURL,
+ ).href;
+ document.head.appendChild(script);
+ return true;
+ },
+ };
+ sendPing(data);
+ if (sampleRUM.cases[checkpoint]) {
+ sampleRUM.cases[checkpoint]();
+ }
+ }
+ if (sampleRUM.always[checkpoint]) {
+ sampleRUM.always[checkpoint](data);
+ }
+ } catch (error) {
+ // something went wrong
+ }
+}
+
+/**
+ * Setup block utils.
+ */
+function setup() {
+ window.hlx = window.hlx || {};
+ window.hlx.RUM_MASK_URL = 'full';
+ window.hlx.codeBasePath = '';
+ window.hlx.lighthouse = new URLSearchParams(window.location.search).get('lighthouse') === 'on';
+
+ const scriptEl = document.querySelector('script[src$="/scripts/scripts.js"]');
+ if (scriptEl) {
+ try {
+ [window.hlx.codeBasePath] = new URL(scriptEl.src).pathname.split('/scripts/scripts.js');
+ } catch (error) {
+ // eslint-disable-next-line no-console
+ console.log(error);
+ }
+ }
+}
+
+/**
+ * Auto initializiation.
+ */
+
+function init() {
+ setup();
+}
+
+/**
+ * Sanitizes a string for use as class name.
+ * @param {string} name The unsanitized string
+ * @returns {string} The class name
+ */
+function toClassName(name) {
+ return typeof name === 'string'
+ ? name
+ .toLowerCase()
+ .replace(/[^0-9a-z]/gi, '-')
+ .replace(/-+/g, '-')
+ .replace(/^-|-$/g, '')
+ : '';
+}
+
+/**
+ * Sanitizes a string for use as a js property name.
+ * @param {string} name The unsanitized string
+ * @returns {string} The camelCased name
+ */
+function toCamelCase(name) {
+ return toClassName(name).replace(/-([a-z])/g, (g) => g[1].toUpperCase());
+}
+
+/**
+ * Extracts the config from a block.
+ * @param {Element} block The block element
+ * @returns {object} The block config
+ */
+// eslint-disable-next-line import/prefer-default-export
+function readBlockConfig(block) {
+ const config = {};
+ block.querySelectorAll(':scope > div').forEach((row) => {
+ if (row.children) {
+ const cols = [...row.children];
+ if (cols[1]) {
+ const col = cols[1];
+ const name = toClassName(cols[0].textContent);
+ let value = '';
+ if (col.querySelector('a')) {
+ const as = [...col.querySelectorAll('a')];
+ if (as.length === 1) {
+ value = as[0].href;
+ } else {
+ value = as.map((a) => a.href);
+ }
+ } else if (col.querySelector('img')) {
+ const imgs = [...col.querySelectorAll('img')];
+ if (imgs.length === 1) {
+ value = imgs[0].src;
+ } else {
+ value = imgs.map((img) => img.src);
+ }
+ } else if (col.querySelector('p')) {
+ const ps = [...col.querySelectorAll('p')];
+ if (ps.length === 1) {
+ value = ps[0].textContent;
+ } else {
+ value = ps.map((p) => p.textContent);
+ }
+ } else value = row.children[1].textContent;
+ config[name] = value;
+ }
+ }
+ });
+ return config;
+}
+
+/**
+ * Loads a CSS file.
+ * @param {string} href URL to the CSS file
+ */
+async function loadCSS(href) {
+ return new Promise((resolve, reject) => {
+ if (!document.querySelector(`head > link[href="${href}"]`)) {
+ const link = document.createElement('link');
+ link.rel = 'stylesheet';
+ link.href = href;
+ link.onload = resolve;
+ link.onerror = reject;
+ document.head.append(link);
+ } else {
+ resolve();
+ }
+ });
+}
+
+/**
+ * Loads a non module JS file.
+ * @param {string} src URL to the JS file
+ * @param {Object} attrs additional optional attributes
+ */
+async function loadScript(src, attrs) {
+ return new Promise((resolve, reject) => {
+ if (!document.querySelector(`head > script[src="${src}"]`)) {
+ const script = document.createElement('script');
+ script.src = src;
+ if (attrs) {
+ // eslint-disable-next-line no-restricted-syntax, guard-for-in
+ for (const attr in attrs) {
+ script.setAttribute(attr, attrs[attr]);
+ }
+ }
+ script.onload = resolve;
+ script.onerror = reject;
+ document.head.append(script);
+ } else {
+ resolve();
+ }
+ });
+}
+
+/**
+ * Retrieves the content of metadata tags.
+ * @param {string} name The metadata name (or property)
+ * @param {Document} doc Document object to query for metadata. Defaults to the window's document
+ * @returns {string} The metadata value(s)
+ */
+function getMetadata(name, doc = document) {
+ const attr = name && name.includes(':') ? 'property' : 'name';
+ const meta = [...doc.head.querySelectorAll(`meta[${attr}="${name}"]`)]
+ .map((m) => m.content)
+ .join(', ');
+ return meta || '';
+}
+
+/**
+ * Returns a picture element with webp and fallbacks
+ * @param {string} src The image URL
+ * @param {string} [alt] The image alternative text
+ * @param {boolean} [eager] Set loading attribute to eager
+ * @param {Array} [breakpoints] Breakpoints and corresponding params (eg. width)
+ * @returns {Element} The picture element
+ */
+function createOptimizedPicture(
+ src,
+ alt = '',
+ eager = false,
+ breakpoints = [{ media: '(min-width: 600px)', width: '2000' }, { width: '750' }],
+) {
+ const url = new URL(src, window.location.href);
+ const picture = document.createElement('picture');
+ const { pathname } = url;
+ const ext = pathname.substring(pathname.lastIndexOf('.') + 1);
+
+ // webp
+ breakpoints.forEach((br) => {
+ const source = document.createElement('source');
+ if (br.media) source.setAttribute('media', br.media);
+ source.setAttribute('type', 'image/webp');
+ source.setAttribute('srcset', `${pathname}?width=${br.width}&format=webply&optimize=medium`);
+ picture.appendChild(source);
+ });
+
+ // fallback
+ breakpoints.forEach((br, i) => {
+ if (i < breakpoints.length - 1) {
+ const source = document.createElement('source');
+ if (br.media) source.setAttribute('media', br.media);
+ source.setAttribute('srcset', `${pathname}?width=${br.width}&format=${ext}&optimize=medium`);
+ picture.appendChild(source);
+ } else {
+ const img = document.createElement('img');
+ img.setAttribute('loading', eager ? 'eager' : 'lazy');
+ img.setAttribute('alt', alt);
+ picture.appendChild(img);
+ img.setAttribute('src', `${pathname}?width=${br.width}&format=${ext}&optimize=medium`);
+ }
+ });
+
+ return picture;
+}
+
+/**
+ * Set template (page structure) and theme (page styles).
+ */
+function decorateTemplateAndTheme() {
+ const addClasses = (element, classes) => {
+ classes.split(',').forEach((c) => {
+ element.classList.add(toClassName(c.trim()));
+ });
+ };
+ const template = getMetadata('template');
+ if (template) addClasses(document.body, template);
+ const theme = getMetadata('theme');
+ if (theme) addClasses(document.body, theme);
+}
+
+/**
+ * Wrap inline text content of block cells within a tag.
+ * @param {Element} block the block element
+ */
+function wrapTextNodes(block) {
+ const validWrappers = [
+ 'P',
+ 'PRE',
+ 'UL',
+ 'OL',
+ 'PICTURE',
+ 'TABLE',
+ 'H1',
+ 'H2',
+ 'H3',
+ 'H4',
+ 'H5',
+ 'H6',
+ ];
+
+ const wrap = (el) => {
+ const wrapper = document.createElement('p');
+ wrapper.append(...el.childNodes);
+ el.append(wrapper);
+ };
+
+ block.querySelectorAll(':scope > div > div').forEach((blockColumn) => {
+ if (blockColumn.hasChildNodes()) {
+ const hasWrapper = !!blockColumn.firstElementChild
+ && validWrappers.some((tagName) => blockColumn.firstElementChild.tagName === tagName);
+ if (!hasWrapper) {
+ wrap(blockColumn);
+ } else if (
+ blockColumn.firstElementChild.tagName === 'PICTURE'
+ && (blockColumn.children.length > 1 || !!blockColumn.textContent.trim())
+ ) {
+ wrap(blockColumn);
+ }
+ }
+ });
+}
+
+/**
+ * Decorates paragraphs containing a single link as buttons.
+ * @param {Element} element container element
+ */
+function decorateButtons(element) {
+ element.querySelectorAll('a').forEach((a) => {
+ a.title = a.title || a.textContent;
+ if (a.href !== a.textContent) {
+ const up = a.parentElement;
+ const twoup = a.parentElement.parentElement;
+ if (!a.querySelector('img')) {
+ if (up.childNodes.length === 1 && (up.tagName === 'P' || up.tagName === 'DIV')) {
+ a.className = 'button'; // default
+ up.classList.add('button-container');
+ }
+ if (
+ up.childNodes.length === 1
+ && up.tagName === 'STRONG'
+ && twoup.childNodes.length === 1
+ && twoup.tagName === 'P'
+ ) {
+ a.className = 'button primary';
+ twoup.classList.add('button-container');
+ }
+ if (
+ up.childNodes.length === 1
+ && up.tagName === 'EM'
+ && twoup.childNodes.length === 1
+ && twoup.tagName === 'P'
+ ) {
+ a.className = 'button secondary';
+ twoup.classList.add('button-container');
+ }
+ }
+ }
+ });
+}
+
+/**
+ * Add ![]()
for icon, prefixed with codeBasePath and optional prefix.
+ * @param {Element} [span] span element with icon classes
+ * @param {string} [prefix] prefix to be added to icon src
+ * @param {string} [alt] alt text to be added to icon
+ */
+function decorateIcon(span, prefix = '', alt = '') {
+ const iconName = Array.from(span.classList)
+ .find((c) => c.startsWith('icon-'))
+ .substring(5);
+ const img = document.createElement('img');
+ img.dataset.iconName = iconName;
+ img.src = `${window.hlx.codeBasePath}${prefix}/icons/${iconName}.svg`;
+ img.alt = alt;
+ img.loading = 'lazy';
+ span.append(img);
+}
+
+/**
+ * Add ![]()
for icons, prefixed with codeBasePath and optional prefix.
+ * @param {Element} [element] Element containing icons
+ * @param {string} [prefix] prefix to be added to icon the src
+ */
+function decorateIcons(element, prefix = '') {
+ const icons = [...element.querySelectorAll('span.icon')];
+ icons.forEach((span) => {
+ decorateIcon(span, prefix);
+ });
+}
+
+/**
+ * Decorates all sections in a container element.
+ * @param {Element} main The container element
+ */
+function decorateSections(main) {
+ main.querySelectorAll(':scope > div').forEach((section) => {
+ const wrappers = [];
+ let defaultContent = false;
+ [...section.children].forEach((e) => {
+ if (e.tagName === 'DIV' || !defaultContent) {
+ const wrapper = document.createElement('div');
+ wrappers.push(wrapper);
+ defaultContent = e.tagName !== 'DIV';
+ if (defaultContent) wrapper.classList.add('default-content-wrapper');
+ }
+ wrappers[wrappers.length - 1].append(e);
+ });
+ wrappers.forEach((wrapper) => section.append(wrapper));
+ section.classList.add('section');
+ section.dataset.sectionStatus = 'initialized';
+ section.style.display = 'none';
+
+ // Process section metadata
+ const sectionMeta = section.querySelector('div.section-metadata');
+ if (sectionMeta) {
+ const meta = readBlockConfig(sectionMeta);
+ Object.keys(meta).forEach((key) => {
+ if (key === 'style') {
+ const styles = meta.style
+ .split(',')
+ .filter((style) => style)
+ .map((style) => toClassName(style.trim()));
+ styles.forEach((style) => section.classList.add(style));
+ } else {
+ section.dataset[toCamelCase(key)] = meta[key];
+ }
+ });
+ sectionMeta.parentNode.remove();
+ }
+ });
+}
+
+/**
+ * Gets placeholders object.
+ * @param {string} [prefix] Location of placeholders
+ * @returns {object} Window placeholders object
+ */
+// eslint-disable-next-line import/prefer-default-export
+async function fetchPlaceholders(prefix = 'default') {
+ window.placeholders = window.placeholders || {};
+ if (!window.placeholders[prefix]) {
+ window.placeholders[prefix] = new Promise((resolve) => {
+ fetch(`${prefix === 'default' ? '' : prefix}/placeholders.json`)
+ .then((resp) => {
+ if (resp.ok) {
+ return resp.json();
+ }
+ return {};
+ })
+ .then((json) => {
+ const placeholders = {};
+ json.data
+ .filter((placeholder) => placeholder.Key)
+ .forEach((placeholder) => {
+ placeholders[toCamelCase(placeholder.Key)] = placeholder.Text;
+ });
+ window.placeholders[prefix] = placeholders;
+ resolve(window.placeholders[prefix]);
+ })
+ .catch(() => {
+ // error loading placeholders
+ window.placeholders[prefix] = {};
+ resolve(window.placeholders[prefix]);
+ });
+ });
+ }
+ return window.placeholders[`${prefix}`];
+}
+
+/**
+ * Updates all section status in a container element.
+ * @param {Element} main The container element
+ */
+function updateSectionsStatus(main) {
+ const sections = [...main.querySelectorAll(':scope > div.section')];
+ for (let i = 0; i < sections.length; i += 1) {
+ const section = sections[i];
+ const status = section.dataset.sectionStatus;
+ if (status !== 'loaded') {
+ const loadingBlock = section.querySelector(
+ '.block[data-block-status="initialized"], .block[data-block-status="loading"]',
+ );
+ if (loadingBlock) {
+ section.dataset.sectionStatus = 'loading';
+ break;
+ } else {
+ section.dataset.sectionStatus = 'loaded';
+ section.style.display = null;
+ }
+ }
+ }
+}
+
+/**
+ * Builds a block DOM Element from a two dimensional array, string, or object
+ * @param {string} blockName name of the block
+ * @param {*} content two dimensional array or string or object of content
+ */
+function buildBlock(blockName, content) {
+ const table = Array.isArray(content) ? content : [[content]];
+ const blockEl = document.createElement('div');
+ // build image block nested div structure
+ blockEl.classList.add(blockName);
+ table.forEach((row) => {
+ const rowEl = document.createElement('div');
+ row.forEach((col) => {
+ const colEl = document.createElement('div');
+ const vals = col.elems ? col.elems : [col];
+ vals.forEach((val) => {
+ if (val) {
+ if (typeof val === 'string') {
+ colEl.innerHTML += val;
+ } else {
+ colEl.appendChild(val);
+ }
+ }
+ });
+ rowEl.appendChild(colEl);
+ });
+ blockEl.appendChild(rowEl);
+ });
+ return blockEl;
+}
+
+/**
+ * Loads JS and CSS for a block.
+ * @param {Element} block The block element
+ */
+async function loadBlock(block) {
+ const status = block.dataset.blockStatus;
+ if (status !== 'loading' && status !== 'loaded') {
+ block.dataset.blockStatus = 'loading';
+ const { blockName } = block.dataset;
+ try {
+ const cssLoaded = loadCSS(`${window.hlx.codeBasePath}/blocks/${blockName}/${blockName}.css`);
+ const decorationComplete = new Promise((resolve) => {
+ (async () => {
+ try {
+ const mod = await import(
+ `${window.hlx.codeBasePath}/blocks/${blockName}/${blockName}.js`
+ );
+ if (mod.default) {
+ await mod.default(block);
+ }
+ } catch (error) {
+ // eslint-disable-next-line no-console
+ console.log(`failed to load module for ${blockName}`, error);
+ }
+ resolve();
+ })();
+ });
+ await Promise.all([cssLoaded, decorationComplete]);
+ } catch (error) {
+ // eslint-disable-next-line no-console
+ console.log(`failed to load block ${blockName}`, error);
+ }
+ block.dataset.blockStatus = 'loaded';
+ }
+ return block;
+}
+
+/**
+ * Loads JS and CSS for all blocks in a container element.
+ * @param {Element} main The container element
+ */
+async function loadBlocks(main) {
+ updateSectionsStatus(main);
+ const blocks = [...main.querySelectorAll('div.block')];
+ for (let i = 0; i < blocks.length; i += 1) {
+ // eslint-disable-next-line no-await-in-loop
+ await loadBlock(blocks[i]);
+ updateSectionsStatus(main);
+ }
+}
+
+/**
+ * Decorates a block.
+ * @param {Element} block The block element
+ */
+function decorateBlock(block) {
+ const shortBlockName = block.classList[0];
+ if (shortBlockName) {
+ block.classList.add('block');
+ block.dataset.blockName = shortBlockName;
+ block.dataset.blockStatus = 'initialized';
+ wrapTextNodes(block);
+ const blockWrapper = block.parentElement;
+ blockWrapper.classList.add(`${shortBlockName}-wrapper`);
+ const section = block.closest('.section');
+ if (section) section.classList.add(`${shortBlockName}-container`);
+ }
+}
+
+/**
+ * Decorates all blocks in a container element.
+ * @param {Element} main The container element
+ */
+function decorateBlocks(main) {
+ main.querySelectorAll('div.section > div > div').forEach(decorateBlock);
+}
+
+/**
+ * Loads a block named 'header' into header
+ * @param {Element} header header element
+ * @returns {Promise}
+ */
+async function loadHeader(header) {
+ const headerBlock = buildBlock('header', '');
+ header.append(headerBlock);
+ decorateBlock(headerBlock);
+ return loadBlock(headerBlock);
+}
+
+/**
+ * Loads a block named 'footer' into footer
+ * @param footer footer element
+ * @returns {Promise}
+ */
+async function loadFooter(footer) {
+ const footerBlock = buildBlock('footer', '');
+ footer.append(footerBlock);
+ decorateBlock(footerBlock);
+ return loadBlock(footerBlock);
+}
+
+/**
+ * Load LCP block and/or wait for LCP in default content.
+ * @param {Array} lcpBlocks Array of blocks
+ */
+async function waitForLCP(lcpBlocks) {
+ const block = document.querySelector('.block');
+ const hasLCPBlock = block && lcpBlocks.includes(block.dataset.blockName);
+ if (hasLCPBlock) await loadBlock(block);
+
+ document.body.style.display = null;
+ const lcpCandidate = document.querySelector('main img');
+
+ await new Promise((resolve) => {
+ if (lcpCandidate && !lcpCandidate.complete) {
+ lcpCandidate.setAttribute('loading', 'eager');
+ lcpCandidate.addEventListener('load', resolve);
+ lcpCandidate.addEventListener('error', resolve);
+ } else {
+ resolve();
+ }
+ });
+}
+
+init();
+
+export {
+ buildBlock,
+ createOptimizedPicture,
+ decorateBlock,
+ decorateBlocks,
+ decorateButtons,
+ decorateIcons,
+ decorateSections,
+ decorateTemplateAndTheme,
+ fetchPlaceholders,
+ getMetadata,
+ loadBlock,
+ loadBlocks,
+ loadCSS,
+ loadFooter,
+ loadHeader,
+ loadScript,
+ readBlockConfig,
+ sampleRUM,
+ setup,
+ toCamelCase,
+ toClassName,
+ updateSectionsStatus,
+ waitForLCP,
+ wrapTextNodes,
+};
diff --git a/plugins/experimentation/tests/fixtures/audiences/fragment-level--alt.html b/plugins/experimentation/tests/fixtures/audiences/fragment-level--alt.html
new file mode 100644
index 00000000..0dffb768
--- /dev/null
+++ b/plugins/experimentation/tests/fixtures/audiences/fragment-level--alt.html
@@ -0,0 +1,23 @@
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/plugins/experimentation/tests/fixtures/audiences/fragment-level--async.html b/plugins/experimentation/tests/fixtures/audiences/fragment-level--async.html
new file mode 100644
index 00000000..64b9e1dd
--- /dev/null
+++ b/plugins/experimentation/tests/fixtures/audiences/fragment-level--async.html
@@ -0,0 +1,25 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/plugins/experimentation/tests/fixtures/audiences/fragment-level--invalid-url.html b/plugins/experimentation/tests/fixtures/audiences/fragment-level--invalid-url.html
new file mode 100644
index 00000000..19cd8305
--- /dev/null
+++ b/plugins/experimentation/tests/fixtures/audiences/fragment-level--invalid-url.html
@@ -0,0 +1,23 @@
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/plugins/experimentation/tests/fixtures/audiences/fragment-level.html b/plugins/experimentation/tests/fixtures/audiences/fragment-level.html
new file mode 100644
index 00000000..af5b73b2
--- /dev/null
+++ b/plugins/experimentation/tests/fixtures/audiences/fragment-level.html
@@ -0,0 +1,23 @@
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/plugins/experimentation/tests/fixtures/audiences/fragments--alt.json b/plugins/experimentation/tests/fixtures/audiences/fragments--alt.json
new file mode 100644
index 00000000..322072e5
--- /dev/null
+++ b/plugins/experimentation/tests/fixtures/audiences/fragments--alt.json
@@ -0,0 +1,17 @@
+{
+ "data": [
+ {
+ "Pages": "/tests/fixtures/audiences/fragment-level--alt",
+ "Audiences": "Foo",
+ "Selectors": ".fragment",
+ "Urls": "/tests/fixtures/audiences/variant-1"
+ },
+ {
+ "Pages": "/tests/fixtures/audiences/fragment-level--alt",
+ "Audiences": "Bar",
+ "Selectors": ".fragment",
+ "Urls": "/tests/fixtures/audiences/variant-2"
+ }
+ ],
+ ":type": "sheet"
+}
\ No newline at end of file
diff --git a/plugins/experimentation/tests/fixtures/audiences/fragments.json b/plugins/experimentation/tests/fixtures/audiences/fragments.json
new file mode 100644
index 00000000..104f1575
--- /dev/null
+++ b/plugins/experimentation/tests/fixtures/audiences/fragments.json
@@ -0,0 +1,29 @@
+{
+ "data": [
+ {
+ "Page": "/tests/fixtures/audiences/fragment-level",
+ "Audience": "Foo",
+ "Selector": ".fragment",
+ "Url": "/tests/fixtures/audiences/variant-1"
+ },
+ {
+ "Page": "/tests/fixtures/audiences/fragment-level",
+ "Audience": "Bar",
+ "Selector": ".fragment",
+ "Url": "/tests/fixtures/audiences/variant-2"
+ },
+ {
+ "Page": "/tests/fixtures/audiences/fragment-level--async",
+ "Audience": "Foo",
+ "Selector": ".fragment",
+ "Url": "/tests/fixtures/audiences/variant-1"
+ },
+ {
+ "Page": "/tests/fixtures/audiences/fragment-level--async",
+ "Audience": "Bar",
+ "Selector": ".fragment",
+ "Url": "/tests/fixtures/audiences/variant-2"
+ }
+ ],
+ ":type": "sheet"
+}
\ No newline at end of file
diff --git a/plugins/experimentation/tests/fixtures/audiences/page-level--async.html b/plugins/experimentation/tests/fixtures/audiences/page-level--async.html
new file mode 100644
index 00000000..267d52b6
--- /dev/null
+++ b/plugins/experimentation/tests/fixtures/audiences/page-level--async.html
@@ -0,0 +1,18 @@
+
+
+
+
+
+
+
+
+
+ Hello World!
+
+
+
\ No newline at end of file
diff --git a/plugins/experimentation/tests/fixtures/audiences/page-level--empty.html b/plugins/experimentation/tests/fixtures/audiences/page-level--empty.html
new file mode 100644
index 00000000..1f050dd5
--- /dev/null
+++ b/plugins/experimentation/tests/fixtures/audiences/page-level--empty.html
@@ -0,0 +1,18 @@
+
+
+
+
+
+
+
+
+
+ Hello World!
+
+
+
\ No newline at end of file
diff --git a/plugins/experimentation/tests/fixtures/audiences/page-level--invalid-url.html b/plugins/experimentation/tests/fixtures/audiences/page-level--invalid-url.html
new file mode 100644
index 00000000..6fec3c0c
--- /dev/null
+++ b/plugins/experimentation/tests/fixtures/audiences/page-level--invalid-url.html
@@ -0,0 +1,18 @@
+
+
+
+
+
+
+
+
+
+ Hello World!
+
+
+
\ No newline at end of file
diff --git a/plugins/experimentation/tests/fixtures/audiences/page-level--invalid.html b/plugins/experimentation/tests/fixtures/audiences/page-level--invalid.html
new file mode 100644
index 00000000..2ebf689a
--- /dev/null
+++ b/plugins/experimentation/tests/fixtures/audiences/page-level--invalid.html
@@ -0,0 +1,18 @@
+
+
+
+
+
+
+
+
+
+ Hello World!
+
+
+
\ No newline at end of file
diff --git a/plugins/experimentation/tests/fixtures/audiences/page-level.html b/plugins/experimentation/tests/fixtures/audiences/page-level.html
new file mode 100644
index 00000000..c4227ed4
--- /dev/null
+++ b/plugins/experimentation/tests/fixtures/audiences/page-level.html
@@ -0,0 +1,18 @@
+
+
+
+
+
+
+
+
+
+ Hello World!
+
+
+
\ No newline at end of file
diff --git a/plugins/experimentation/tests/fixtures/audiences/section-level.html b/plugins/experimentation/tests/fixtures/audiences/section-level.html
new file mode 100644
index 00000000..e064b2c7
--- /dev/null
+++ b/plugins/experimentation/tests/fixtures/audiences/section-level.html
@@ -0,0 +1,22 @@
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/plugins/experimentation/tests/fixtures/audiences/variant-1.html b/plugins/experimentation/tests/fixtures/audiences/variant-1.html
new file mode 100644
index 00000000..17dc08dc
--- /dev/null
+++ b/plugins/experimentation/tests/fixtures/audiences/variant-1.html
@@ -0,0 +1,9 @@
+
+
+
+
+
+ Hello v1!
+
+
+
\ No newline at end of file
diff --git a/plugins/experimentation/tests/fixtures/audiences/variant-2.html b/plugins/experimentation/tests/fixtures/audiences/variant-2.html
new file mode 100644
index 00000000..d057125e
--- /dev/null
+++ b/plugins/experimentation/tests/fixtures/audiences/variant-2.html
@@ -0,0 +1,9 @@
+
+
+
+
+
+ Hello v2!
+
+
+
\ No newline at end of file
diff --git a/plugins/experimentation/tests/fixtures/campaigns/fragment-level--alt.html b/plugins/experimentation/tests/fixtures/campaigns/fragment-level--alt.html
new file mode 100644
index 00000000..98e88fa7
--- /dev/null
+++ b/plugins/experimentation/tests/fixtures/campaigns/fragment-level--alt.html
@@ -0,0 +1,17 @@
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/plugins/experimentation/tests/fixtures/campaigns/fragment-level--async.html b/plugins/experimentation/tests/fixtures/campaigns/fragment-level--async.html
new file mode 100644
index 00000000..cbb28471
--- /dev/null
+++ b/plugins/experimentation/tests/fixtures/campaigns/fragment-level--async.html
@@ -0,0 +1,19 @@
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/plugins/experimentation/tests/fixtures/campaigns/fragment-level--invalid-url.html b/plugins/experimentation/tests/fixtures/campaigns/fragment-level--invalid-url.html
new file mode 100644
index 00000000..32a782ee
--- /dev/null
+++ b/plugins/experimentation/tests/fixtures/campaigns/fragment-level--invalid-url.html
@@ -0,0 +1,17 @@
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/plugins/experimentation/tests/fixtures/campaigns/fragment-level.html b/plugins/experimentation/tests/fixtures/campaigns/fragment-level.html
new file mode 100644
index 00000000..5cbd580c
--- /dev/null
+++ b/plugins/experimentation/tests/fixtures/campaigns/fragment-level.html
@@ -0,0 +1,17 @@
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/plugins/experimentation/tests/fixtures/campaigns/fragments--alt.json b/plugins/experimentation/tests/fixtures/campaigns/fragments--alt.json
new file mode 100644
index 00000000..b684ee64
--- /dev/null
+++ b/plugins/experimentation/tests/fixtures/campaigns/fragments--alt.json
@@ -0,0 +1,17 @@
+{
+ "data": [
+ {
+ "Pages": "/tests/fixtures/campaigns/fragment-level--alt",
+ "Campaigns": "Foo",
+ "Selectors": ".fragment",
+ "Urls": "/tests/fixtures/campaigns/variant-1"
+ },
+ {
+ "Pages": "/tests/fixtures/campaigns/fragment-level--alt",
+ "Campaigns": "Bar",
+ "Selectors": ".fragment",
+ "Urls": "/tests/fixtures/campaigns/variant-2"
+ }
+ ],
+ ":type": "sheet"
+}
\ No newline at end of file
diff --git a/plugins/experimentation/tests/fixtures/campaigns/fragments.json b/plugins/experimentation/tests/fixtures/campaigns/fragments.json
new file mode 100644
index 00000000..c3de752d
--- /dev/null
+++ b/plugins/experimentation/tests/fixtures/campaigns/fragments.json
@@ -0,0 +1,17 @@
+{
+ "data": [
+ {
+ "Page": "/tests/fixtures/campaigns/fragment-level",
+ "Campaign": "Foo",
+ "Selector": ".fragment",
+ "Url": "/tests/fixtures/campaigns/variant-1"
+ },
+ {
+ "Page": "/tests/fixtures/campaigns/fragment-level",
+ "Campaign": "Bar",
+ "Selector": ".fragment",
+ "Url": "/tests/fixtures/campaigns/variant-2"
+ }
+ ],
+ ":type": "sheet"
+}
\ No newline at end of file
diff --git a/plugins/experimentation/tests/fixtures/campaigns/page-level--audiences.html b/plugins/experimentation/tests/fixtures/campaigns/page-level--audiences.html
new file mode 100644
index 00000000..5475ed8b
--- /dev/null
+++ b/plugins/experimentation/tests/fixtures/campaigns/page-level--audiences.html
@@ -0,0 +1,11 @@
+
+
+
+
+
+
+
+
+ Hello World!
+
+
\ No newline at end of file
diff --git a/plugins/experimentation/tests/fixtures/campaigns/page-level--backward-compatibility--audience.html b/plugins/experimentation/tests/fixtures/campaigns/page-level--backward-compatibility--audience.html
new file mode 100644
index 00000000..e3ed2386
--- /dev/null
+++ b/plugins/experimentation/tests/fixtures/campaigns/page-level--backward-compatibility--audience.html
@@ -0,0 +1,11 @@
+
+
+
+
+
+
+
+
+ Hello World!
+
+
\ No newline at end of file
diff --git a/plugins/experimentation/tests/fixtures/campaigns/page-level--empty.html b/plugins/experimentation/tests/fixtures/campaigns/page-level--empty.html
new file mode 100644
index 00000000..e6aac97e
--- /dev/null
+++ b/plugins/experimentation/tests/fixtures/campaigns/page-level--empty.html
@@ -0,0 +1,12 @@
+
+
+
+
+
+
+
+
+ Hello World!
+
+
+
\ No newline at end of file
diff --git a/plugins/experimentation/tests/fixtures/campaigns/page-level--invalid-url.html b/plugins/experimentation/tests/fixtures/campaigns/page-level--invalid-url.html
new file mode 100644
index 00000000..101a8b9c
--- /dev/null
+++ b/plugins/experimentation/tests/fixtures/campaigns/page-level--invalid-url.html
@@ -0,0 +1,12 @@
+
+
+
+
+
+
+
+
+ Hello World!
+
+
+
\ No newline at end of file
diff --git a/plugins/experimentation/tests/fixtures/campaigns/page-level.html b/plugins/experimentation/tests/fixtures/campaigns/page-level.html
new file mode 100644
index 00000000..df3ea0d9
--- /dev/null
+++ b/plugins/experimentation/tests/fixtures/campaigns/page-level.html
@@ -0,0 +1,12 @@
+
+
+
+
+
+
+
+
+ Hello World!
+
+
+
\ No newline at end of file
diff --git a/plugins/experimentation/tests/fixtures/campaigns/section-level.html b/plugins/experimentation/tests/fixtures/campaigns/section-level.html
new file mode 100644
index 00000000..e0b99176
--- /dev/null
+++ b/plugins/experimentation/tests/fixtures/campaigns/section-level.html
@@ -0,0 +1,16 @@
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/plugins/experimentation/tests/fixtures/campaigns/variant-1.html b/plugins/experimentation/tests/fixtures/campaigns/variant-1.html
new file mode 100644
index 00000000..17dc08dc
--- /dev/null
+++ b/plugins/experimentation/tests/fixtures/campaigns/variant-1.html
@@ -0,0 +1,9 @@
+
+
+
+
+
+ Hello v1!
+
+
+
\ No newline at end of file
diff --git a/plugins/experimentation/tests/fixtures/campaigns/variant-2.html b/plugins/experimentation/tests/fixtures/campaigns/variant-2.html
new file mode 100644
index 00000000..d057125e
--- /dev/null
+++ b/plugins/experimentation/tests/fixtures/campaigns/variant-2.html
@@ -0,0 +1,9 @@
+
+
+
+
+
+ Hello v2!
+
+
+
\ No newline at end of file
diff --git a/plugins/experimentation/tests/fixtures/experiments/fragment-level--alt.html b/plugins/experimentation/tests/fixtures/experiments/fragment-level--alt.html
new file mode 100644
index 00000000..8d3307ad
--- /dev/null
+++ b/plugins/experimentation/tests/fixtures/experiments/fragment-level--alt.html
@@ -0,0 +1,17 @@
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/plugins/experimentation/tests/fixtures/experiments/fragment-level--async.html b/plugins/experimentation/tests/fixtures/experiments/fragment-level--async.html
new file mode 100644
index 00000000..bab83092
--- /dev/null
+++ b/plugins/experimentation/tests/fixtures/experiments/fragment-level--async.html
@@ -0,0 +1,19 @@
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/plugins/experimentation/tests/fixtures/experiments/fragment-level--invalid-url.html b/plugins/experimentation/tests/fixtures/experiments/fragment-level--invalid-url.html
new file mode 100644
index 00000000..fc9a675b
--- /dev/null
+++ b/plugins/experimentation/tests/fixtures/experiments/fragment-level--invalid-url.html
@@ -0,0 +1,17 @@
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/plugins/experimentation/tests/fixtures/experiments/fragment-level.html b/plugins/experimentation/tests/fixtures/experiments/fragment-level.html
new file mode 100644
index 00000000..75f2a820
--- /dev/null
+++ b/plugins/experimentation/tests/fixtures/experiments/fragment-level.html
@@ -0,0 +1,17 @@
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/plugins/experimentation/tests/fixtures/experiments/fragments--alt.json b/plugins/experimentation/tests/fixtures/experiments/fragments--alt.json
new file mode 100644
index 00000000..749999aa
--- /dev/null
+++ b/plugins/experimentation/tests/fixtures/experiments/fragments--alt.json
@@ -0,0 +1,19 @@
+{
+ "data": [
+ {
+ "Pages": "/tests/fixtures/experiments/fragment-level--alt",
+ "Experiments": "Baz",
+ "Variants": "challenger-1",
+ "Selectors": ".fragment",
+ "Urls": "/tests/fixtures/experiments/section-level-v1"
+ },
+ {
+ "Pages": "/tests/fixtures/experiments/fragment-level--alt",
+ "Experiments": "Baz",
+ "Variants": "challenger-2",
+ "Selectors": ".fragment",
+ "Urls": "/tests/fixtures/experiments/section-level-v2"
+ }
+ ],
+ ":type": "sheet"
+}
\ No newline at end of file
diff --git a/plugins/experimentation/tests/fixtures/experiments/fragments.json b/plugins/experimentation/tests/fixtures/experiments/fragments.json
new file mode 100644
index 00000000..7fb3c722
--- /dev/null
+++ b/plugins/experimentation/tests/fixtures/experiments/fragments.json
@@ -0,0 +1,33 @@
+{
+ "data": [
+ {
+ "Page": "/tests/fixtures/experiments/fragment-level",
+ "Experiment": "Baz",
+ "Variant": "challenger-1",
+ "Selector": ".fragment",
+ "Url": "/tests/fixtures/experiments/section-level-v1"
+ },
+ {
+ "Page": "/tests/fixtures/experiments/fragment-level",
+ "Experiment": "Baz",
+ "Variant": "challenger-2",
+ "Selector": ".fragment",
+ "Url": "/tests/fixtures/experiments/section-level-v2"
+ },
+ {
+ "Page": "/tests/fixtures/experiments/fragment-level--async",
+ "Experiment": "Baz",
+ "Variant": "challenger-1",
+ "Selector": ".fragment",
+ "Url": "/tests/fixtures/experiments/section-level-v1"
+ },
+ {
+ "Page": "/tests/fixtures/experiments/fragment-level--async",
+ "Experiment": "Baz",
+ "Variant": "challenger-2",
+ "Selector": ".fragment",
+ "Url": "/tests/fixtures/experiments/section-level-v2"
+ }
+ ],
+ ":type": "sheet"
+}
\ No newline at end of file
diff --git a/plugins/experimentation/tests/fixtures/experiments/page-level--audiences.html b/plugins/experimentation/tests/fixtures/experiments/page-level--audiences.html
new file mode 100644
index 00000000..1fab348e
--- /dev/null
+++ b/plugins/experimentation/tests/fixtures/experiments/page-level--audiences.html
@@ -0,0 +1,11 @@
+
+
+
+
+
+
+
+
+ Hello World!
+
+
\ No newline at end of file
diff --git a/plugins/experimentation/tests/fixtures/experiments/page-level--backward-compatibility--audience.html b/plugins/experimentation/tests/fixtures/experiments/page-level--backward-compatibility--audience.html
new file mode 100644
index 00000000..99f19ad0
--- /dev/null
+++ b/plugins/experimentation/tests/fixtures/experiments/page-level--backward-compatibility--audience.html
@@ -0,0 +1,11 @@
+
+
+
+
+
+
+
+
+ Hello World!
+
+
\ No newline at end of file
diff --git a/plugins/experimentation/tests/fixtures/experiments/page-level--backward-compatibility--instant-experiment.html b/plugins/experimentation/tests/fixtures/experiments/page-level--backward-compatibility--instant-experiment.html
new file mode 100644
index 00000000..50301eee
--- /dev/null
+++ b/plugins/experimentation/tests/fixtures/experiments/page-level--backward-compatibility--instant-experiment.html
@@ -0,0 +1,10 @@
+
+
+
+
+
+
+
+ Hello World!
+
+
\ No newline at end of file
diff --git a/plugins/experimentation/tests/fixtures/experiments/page-level--code.html b/plugins/experimentation/tests/fixtures/experiments/page-level--code.html
new file mode 100644
index 00000000..de01d6e9
--- /dev/null
+++ b/plugins/experimentation/tests/fixtures/experiments/page-level--code.html
@@ -0,0 +1,10 @@
+
+
+
+
+
+
+
+ Hello World!
+
+
\ No newline at end of file
diff --git a/plugins/experimentation/tests/fixtures/experiments/page-level--empty.html b/plugins/experimentation/tests/fixtures/experiments/page-level--empty.html
new file mode 100644
index 00000000..f37b132c
--- /dev/null
+++ b/plugins/experimentation/tests/fixtures/experiments/page-level--empty.html
@@ -0,0 +1,10 @@
+
+
+
+
+
+
+
+ Hello World!
+
+
\ No newline at end of file
diff --git a/plugins/experimentation/tests/fixtures/experiments/page-level--empty2.html b/plugins/experimentation/tests/fixtures/experiments/page-level--empty2.html
new file mode 100644
index 00000000..c8f6e1fa
--- /dev/null
+++ b/plugins/experimentation/tests/fixtures/experiments/page-level--empty2.html
@@ -0,0 +1,10 @@
+
+
+
+
+
+
+
+ Hello World!
+
+
\ No newline at end of file
diff --git a/plugins/experimentation/tests/fixtures/experiments/page-level--inactive.html b/plugins/experimentation/tests/fixtures/experiments/page-level--inactive.html
new file mode 100644
index 00000000..782081be
--- /dev/null
+++ b/plugins/experimentation/tests/fixtures/experiments/page-level--inactive.html
@@ -0,0 +1,11 @@
+
+
+
+
+
+
+
+
+ Hello World!
+
+
\ No newline at end of file
diff --git a/plugins/experimentation/tests/fixtures/experiments/page-level--invalid-url.html b/plugins/experimentation/tests/fixtures/experiments/page-level--invalid-url.html
new file mode 100644
index 00000000..87cb1d45
--- /dev/null
+++ b/plugins/experimentation/tests/fixtures/experiments/page-level--invalid-url.html
@@ -0,0 +1,10 @@
+
+
+
+
+
+
+
+ Hello World!
+
+
\ No newline at end of file
diff --git a/plugins/experimentation/tests/fixtures/experiments/page-level--split.html b/plugins/experimentation/tests/fixtures/experiments/page-level--split.html
new file mode 100644
index 00000000..17fb7462
--- /dev/null
+++ b/plugins/experimentation/tests/fixtures/experiments/page-level--split.html
@@ -0,0 +1,11 @@
+
+
+
+
+
+
+
+
+ Hello World!
+
+
\ No newline at end of file
diff --git a/plugins/experimentation/tests/fixtures/experiments/page-level--time-bound-end.html b/plugins/experimentation/tests/fixtures/experiments/page-level--time-bound-end.html
new file mode 100644
index 00000000..dc3407b8
--- /dev/null
+++ b/plugins/experimentation/tests/fixtures/experiments/page-level--time-bound-end.html
@@ -0,0 +1,11 @@
+
+
+
+
+
+
+
+
+ Hello World!
+
+
\ No newline at end of file
diff --git a/plugins/experimentation/tests/fixtures/experiments/page-level--time-bound-start.html b/plugins/experimentation/tests/fixtures/experiments/page-level--time-bound-start.html
new file mode 100644
index 00000000..72e12c4e
--- /dev/null
+++ b/plugins/experimentation/tests/fixtures/experiments/page-level--time-bound-start.html
@@ -0,0 +1,11 @@
+
+
+
+
+
+
+
+
+ Hello World!
+
+
\ No newline at end of file
diff --git a/plugins/experimentation/tests/fixtures/experiments/page-level--time-bound.html b/plugins/experimentation/tests/fixtures/experiments/page-level--time-bound.html
new file mode 100644
index 00000000..fde3028b
--- /dev/null
+++ b/plugins/experimentation/tests/fixtures/experiments/page-level--time-bound.html
@@ -0,0 +1,12 @@
+
+
+
+
+
+
+
+
+
+ Hello World!
+
+
\ No newline at end of file
diff --git a/plugins/experimentation/tests/fixtures/experiments/page-level-v1.html b/plugins/experimentation/tests/fixtures/experiments/page-level-v1.html
new file mode 100644
index 00000000..4771e208
--- /dev/null
+++ b/plugins/experimentation/tests/fixtures/experiments/page-level-v1.html
@@ -0,0 +1,7 @@
+
+
+
+
+ Hello v1!
+
+
\ No newline at end of file
diff --git a/plugins/experimentation/tests/fixtures/experiments/page-level-v2.html b/plugins/experimentation/tests/fixtures/experiments/page-level-v2.html
new file mode 100644
index 00000000..9ff94a12
--- /dev/null
+++ b/plugins/experimentation/tests/fixtures/experiments/page-level-v2.html
@@ -0,0 +1,7 @@
+
+
+
+
+ Hello v2!
+
+
\ No newline at end of file
diff --git a/plugins/experimentation/tests/fixtures/experiments/page-level.html b/plugins/experimentation/tests/fixtures/experiments/page-level.html
new file mode 100644
index 00000000..03467640
--- /dev/null
+++ b/plugins/experimentation/tests/fixtures/experiments/page-level.html
@@ -0,0 +1,10 @@
+
+
+
+
+
+
+
+ Hello World!
+
+
\ No newline at end of file
diff --git a/plugins/experimentation/tests/fixtures/experiments/section-level-v1.html b/plugins/experimentation/tests/fixtures/experiments/section-level-v1.html
new file mode 100644
index 00000000..17dc08dc
--- /dev/null
+++ b/plugins/experimentation/tests/fixtures/experiments/section-level-v1.html
@@ -0,0 +1,9 @@
+
+
+
+
+
+ Hello v1!
+
+
+
\ No newline at end of file
diff --git a/plugins/experimentation/tests/fixtures/experiments/section-level-v2.html b/plugins/experimentation/tests/fixtures/experiments/section-level-v2.html
new file mode 100644
index 00000000..d057125e
--- /dev/null
+++ b/plugins/experimentation/tests/fixtures/experiments/section-level-v2.html
@@ -0,0 +1,9 @@
+
+
+
+
+
+ Hello v2!
+
+
+
\ No newline at end of file
diff --git a/plugins/experimentation/tests/fixtures/experiments/section-level.html b/plugins/experimentation/tests/fixtures/experiments/section-level.html
new file mode 100644
index 00000000..bf66e92b
--- /dev/null
+++ b/plugins/experimentation/tests/fixtures/experiments/section-level.html
@@ -0,0 +1,22 @@
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/plugins/experimentation/tests/fixtures/global.html b/plugins/experimentation/tests/fixtures/global.html
new file mode 100644
index 00000000..70f2c9ff
--- /dev/null
+++ b/plugins/experimentation/tests/fixtures/global.html
@@ -0,0 +1,8 @@
+
+
+
+
+
+ Hello World!
+
+
\ No newline at end of file
diff --git a/plugins/experimentation/tests/fixtures/scripts.js b/plugins/experimentation/tests/fixtures/scripts.js
new file mode 100644
index 00000000..e763cb30
--- /dev/null
+++ b/plugins/experimentation/tests/fixtures/scripts.js
@@ -0,0 +1,103 @@
+import {
+ buildBlock,
+ decorateButtons,
+ decorateIcons,
+ decorateSections,
+ decorateBlocks,
+ decorateTemplateAndTheme,
+ waitForLCP,
+ loadBlocks,
+} from './aem.js';
+
+const LCP_BLOCKS = []; // add your LCP blocks to the list
+
+/**
+ * Builds hero block and prepends to main in a new section.
+ * @param {Element} main The container element
+ */
+function buildHeroBlock(main) {
+ const h1 = main.querySelector('h1');
+ const picture = main.querySelector('picture');
+ // eslint-disable-next-line no-bitwise
+ if (h1 && picture && (h1.compareDocumentPosition(picture) & Node.DOCUMENT_POSITION_PRECEDING)) {
+ const section = document.createElement('div');
+ section.append(buildBlock('hero', { elems: [picture, h1] }));
+ main.prepend(section);
+ }
+}
+
+/**
+ * Builds all synthetic blocks in a container element.
+ * @param {Element} main The container element
+ */
+function buildAutoBlocks(main) {
+ try {
+ buildHeroBlock(main);
+ } catch (error) {
+ // eslint-disable-next-line no-console
+ console.error('Auto Blocking failed', error);
+ }
+}
+
+/**
+ * Decorates the main element.
+ * @param {Element} main The main element
+ */
+// eslint-disable-next-line import/prefer-default-export
+export function decorateMain(main) {
+ // hopefully forward compatible button decoration
+ decorateButtons(main);
+ decorateIcons(main);
+ buildAutoBlocks(main);
+ decorateSections(main);
+ decorateBlocks(main);
+}
+
+/**
+ * Loads everything needed to get to LCP.
+ * @param {Element} doc The container element
+ */
+async function loadEager(doc) {
+ document.documentElement.lang = 'en';
+ decorateTemplateAndTheme();
+
+ // Add below snippet early in the eager phase
+ if (document.head.querySelector('[name^="experiment"],[name^="campaign-"],[name^="audience-"]')
+ || [...document.querySelectorAll('.section-metadata div')].some((d) => d.textContent.match(/Experiment|Campaign|Audience/i))) {
+ // eslint-disable-next-line import/no-absolute-path, import/no-unresolved
+ const { loadEager: runEager } = await import('/src/index.js');
+ await runEager(document, { audiences: window.AUDIENCES || {} });
+ }
+
+ const main = doc.querySelector('main');
+ if (main) {
+ decorateMain(main);
+ document.body.classList.add('appear');
+ await waitForLCP(LCP_BLOCKS);
+ }
+}
+
+/**
+ * Loads everything that doesn't need to be delayed.
+ * @param {Element} doc The container element
+ */
+async function loadLazy(doc) {
+ const main = doc.querySelector('main');
+ await loadBlocks(main);
+}
+
+/**
+ * Loads everything that happens a lot later,
+ * without impacting the user experience.
+ */
+function loadDelayed() {
+ // load anything that can be postponed to the latest here
+}
+
+async function loadPage() {
+ await loadEager(document);
+ await loadLazy(document);
+ loadDelayed();
+}
+
+loadPage();
diff --git a/plugins/experimentation/tests/global.test.js b/plugins/experimentation/tests/global.test.js
new file mode 100644
index 00000000..5f38d617
--- /dev/null
+++ b/plugins/experimentation/tests/global.test.js
@@ -0,0 +1,20 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import { test, expect } from '@playwright/test';
+import { track } from './coverage.js';
+
+track(test);
+
+test.describe('Plugin config', () => {
+ test('debug statements are shown in dev/stage', async ({ page }) => {
+ await page.goto('/tests/fixtures/global');
+ await page.addScriptTag({ content: 'import { setDebugMode } from "/src/index.js"; window.setDebugMode = setDebugMode;', type: 'module' });
+ expect(await page.evaluate(async () => window.setDebugMode(new URL('http://localhost:3000'), {}))).toEqual(true);
+ expect(await page.evaluate(async () => window.setDebugMode(new URL('https://ref--repo--org.hlx.page/'), {}))).toEqual(true);
+ expect(await page.evaluate(async () => window.setDebugMode(new URL('https://ref--repo--org.hlx.live/'), {}))).toEqual(false);
+ expect(await page.evaluate(async () => window.setDebugMode(new URL('https://ref--repo--org.hlx.live/'), { isProd: () => false }))).toEqual(true);
+ expect(await page.evaluate(async () => window.setDebugMode(new URL('https://stage.foo.com'), { prodHost: 'www.foo.com' }))).toEqual(true);
+ });
+
+ // test.skip('debug statements are not shown on prod');
+ // test.skip('sends event with details when experiment/audience/campaign is run');
+});
diff --git a/plugins/experimentation/tests/setup.js b/plugins/experimentation/tests/setup.js
new file mode 100644
index 00000000..72408938
--- /dev/null
+++ b/plugins/experimentation/tests/setup.js
@@ -0,0 +1,5 @@
+import { start } from './coverage.js';
+
+export default async function setup() {
+ await start();
+}
diff --git a/plugins/experimentation/tests/teardown.js b/plugins/experimentation/tests/teardown.js
new file mode 100644
index 00000000..553211fc
--- /dev/null
+++ b/plugins/experimentation/tests/teardown.js
@@ -0,0 +1,5 @@
+import { end } from './coverage.js';
+
+export default async function teardown() {
+ await end();
+}
diff --git a/plugins/experimentation/tests/utils.js b/plugins/experimentation/tests/utils.js
new file mode 100644
index 00000000..1df0890e
--- /dev/null
+++ b/plugins/experimentation/tests/utils.js
@@ -0,0 +1,34 @@
+import { expect } from '@playwright/test';
+
+async function waitForNamespace(page, namespace) {
+ await expect(async () => {
+ expect(await page.evaluate((ns) => window.hlx[ns], namespace)).toBeDefined();
+ }).toPass();
+ // Wait for the fragments to decorate
+ await new Promise((res) => { setTimeout(res); });
+}
+
+export async function goToAndRunAudience(page, url) {
+ await page.goto(url);
+ await waitForNamespace(page, 'audiences');
+}
+
+export async function goToAndRunCampaign(page, url) {
+ await page.goto(url);
+ await waitForNamespace(page, 'campaigns');
+}
+
+export async function goToAndRunExperiment(page, url) {
+ await page.goto(url);
+ await waitForNamespace(page, 'experiments');
+}
+
+export async function waitForDomEvent(page, eventName) {
+ await page.addInitScript((name) => {
+ // Override the prototype
+ window.eventPromise = new Promise((resolve) => {
+ document.addEventListener(name, (ev) => resolve(ev.detail));
+ });
+ }, eventName);
+ return async () => await window.eventPromise;
+}
diff --git a/scripts/scripts.js b/scripts/scripts.js
index 3ed722bb..d2637df3 100644
--- a/scripts/scripts.js
+++ b/scripts/scripts.js
@@ -1,16 +1,16 @@
import {
sampleRUM,
buildBlock,
- getAllMetadata,
- getMetadata,
loadHeader,
loadFooter,
decorateButtons,
decorateIcons,
decorateSections,
+ decorateBlock,
decorateBlocks,
decorateTemplateAndTheme,
waitForLCP,
+ loadBlock,
loadBlocks,
loadCSS,
} from './lib-franklin.js';
@@ -40,9 +40,10 @@ window.hlx.plugins.add('rum-conversion', {
});
window.hlx.plugins.add('experimentation', {
- condition: () => getMetadata('experiment')
- || Object.keys(getAllMetadata('campaign')).length
- || Object.keys(getAllMetadata('audience')).length,
+ condition: () => document.head.querySelector('[name^="experiment"],[name^="campaign-"],[name^="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 },
load: 'eager',
url: '/plugins/experimentation/src/index.js',
@@ -182,7 +183,6 @@ export function decorateMain(main) {
async function loadEager(doc) {
document.documentElement.lang = 'en';
decorateTemplateAndTheme();
-
await window.hlx.plugins.run('loadEager');
// load demo config
@@ -275,6 +275,28 @@ async function loadPage() {
await setupAnalytics;
}
+// Properly decorate fragments that were pulled in
+document.addEventListener('aem:experimentation', (ev) => {
+ // Do not redecorate the default content
+ if (ev.detail.variant === 'control' || ev.detail?.campaign === 'default' || ev.detail?.audience === 'default') {
+ return;
+ }
+ // Rebuild the autoblock as needed
+ if (ev.detail.element.classList.contains('hero')) {
+ const parent = ev.detail.element.parentElement.parentElement;
+ [...ev.detail.element.children].reverse().forEach((el) => parent.prepend(el));
+ ev.detail.element.remove();
+ // Rebuild and redecorate the hero block
+ buildHeroBlock(parent);
+ decorateBlocks(parent);
+ loadBlocks(parent);
+ } else if (ev.detail.element.classList.contains('block')) {
+ // Otherwise, just reset the replaced blocks and redecorate them
+ decorateBlock(ev.detail.element);
+ loadBlock(ev.detail.element);
+ }
+});
+
const cwv = {};
// Forward the RUM CWV cached measurements to edge using WebSDK before the page unloads