Skip to content

Commit

Permalink
chore: update to the latest version of the experimentation plugin
Browse files Browse the repository at this point in the history
  • Loading branch information
@ramboz
ramboz committed Jul 19, 2024
1 parent a1c9ca5 commit 2baa0d7
Show file tree
Hide file tree
Showing 4 changed files with 204 additions and 88 deletions.
60 changes: 41 additions & 19 deletions plugins/experimentation/src/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,12 +89,13 @@ async function replaceInner(path, main) {
const html = await resp.text();
// parse with DOMParser to guarantee valid HTML, and no script execution(s)
const dom = new DOMParser().parseFromString(html, 'text/html');
// eslint-disable-next-line no-param-reassign
main.replaceWith(dom.querySelector('main'));
// do not use replaceWith API here since this would replace the main reference
// in scripts.js as well and prevent proper decoration of the sections/blocks
main.innerHTML = dom.querySelector('main').innerHTML;
return path;
} catch (e) {
// eslint-disable-next-line no-console
console.log(`error loading content: ${plainPath}`, e);
console.log(`error loading content: ${path}`, e);
}
return null;
}
Expand Down Expand Up @@ -210,7 +211,7 @@ function inferEmptyPercentageSplits(variants) {
if (variantsWithoutPercentage.length) {
const missingPercentage = remainingPercentage / variantsWithoutPercentage.length;
variantsWithoutPercentage.forEach((v) => {
v.percentageSplit = missingPercentage.toFixed(2);
v.percentageSplit = missingPercentage.toFixed(4);
});
}
}
Expand Down Expand Up @@ -240,12 +241,15 @@ function getConfigForInstantExperiment(
variantNames: [],
};

const pages = instantExperiment.split(',').map((p) => new URL(p.trim(), window.location).pathname);
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)
? splitString.split(',').map((i) => parseFloat(i) / 100)
// even split fallback
: [...new Array(pages.length)].map(() => 1 / (pages.length + 1));

Expand All @@ -261,7 +265,7 @@ function getConfigForInstantExperiment(
const vname = `challenger-${i + 1}`;
config.variantNames.push(vname);
config.variants[vname] = {
percentageSplit: `${splits[i].toFixed(2)}`,
percentageSplit: `${splits[i].toFixed(4)}`,
pages: [page],
blocks: [],
label: `Challenger ${i + 1}`,
Expand Down Expand Up @@ -435,6 +439,8 @@ export async function runExperiment(document, options, context) {
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,
Expand All @@ -450,13 +456,18 @@ export async function runExperiment(document, options, context) {
const currentPath = window.location.pathname;
const control = experimentConfig.variants[experimentConfig.variantNames[0]];
const index = control.pages.indexOf(currentPath);
if (index < 0 || pages[index] === currentPath) {
if (index < 0) {
return false;
}

// Fullpage content experiment
document.body.classList.add(`experiment-${context.toClassName(experimentConfig.id)}`);
const result = await replaceInner(pages[index], document.querySelector('main'));
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
Expand Down Expand Up @@ -668,14 +679,25 @@ function adjustedRumSamplingRate(checkpoint, options, context) {
};
}

export async function loadEager(document, options, context) {
document.addEventListener('rum', (event) => {
const checkpoint = event.detail ? event.detail.checkpoint || '' : '';
if(['audiences', 'campaign', 'experiment'].includes(checkpoint)) {
adjustedRumSamplingRate(checkpoint, options, context);
}
});
function adjustRumSampligRate(document, options, context) {
const checkpoints = ['audiences', 'campaign', 'experiment'];
if (context.sampleRUM.always) { // RUM v1.x
checkpoints.forEach((ck) => {
context.sampleRUM.always.on(ck, adjustedRumSamplingRate(ck, options, context));
});
} else { // RUM 2.x
document.addEventListener('rum', (event) => {
if (event.detail
&& event.detail.checkpoint
&& checkpoints.includes(event.detail.checkpoint)) {
adjustedRumSamplingRate(event.detail.checkpoint, options, context);
}
});
}
}

export async function loadEager(document, options, context) {
adjustRumSampligRate(document, options, context);
let res = await runCampaign(document, options, context);
if (!res) {
res = await runExperiment(document, options, context);
Expand All @@ -694,9 +716,9 @@ export async function loadLazy(document, options, context) {
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))) {
&& (options.prodHost === window.location.host
|| options.prodHost === window.location.hostname
|| options.prodHost === window.location.origin))) {
return;
}
// eslint-disable-next-line import/no-cycle
Expand Down
155 changes: 110 additions & 45 deletions plugins/experimentation/src/preview.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,40 +9,63 @@
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/
[hidden] {
display: none !important;
}

.hlx-highlight {
--highlight-size: .5rem;

.hlx-preview-overlay {
z-index: 999;
outline-color: #888;
outline-offset: calc(-1 * var(--highlight-size));
outline-style: dashed;
outline-width: var(--highlight-size);
background-color: #8882;
}

.hlx-preview-overlay {
z-index: 99999;
position: fixed;
bottom: 32px;
right: 32px;
color: #eee;
font-size: 1rem;
font-weight: 600;
font-size: 24px;
display: flex;
flex-direction: column;
gap: 16px;
gap: .5rem;
inset: auto auto 1em;
align-items: center;
justify-content: flex-end;
width: 100%;
}

.hlx-badge {
border-radius: 32px;
background-color: #888;
--color: #888;

border-radius: 2em;
background-color: var(--color);
border-style: solid;
border-color: #fff;
color: #eee;
padding: 16px 32px;
padding: 1em 1.5em;
cursor: pointer;
display: flex;
align-items: center;
position: relative;
font-size: inherit;
overflow: initial;
margin: 0;
line-height: 1.5;
justify-content: space-between;
text-transform: none;
font-family: system-ui, sans-serif;
}

.hlx-badge:focus,
.hlx-badge:hover {
background-color: #888;
--color: #888;
}

.hlx-badge:focus-visible {
outline-style: solid;
outline-width: .25em;
}

.hlx-badge > span {
Expand Down Expand Up @@ -81,16 +104,22 @@

.hlx-popup {
position: absolute;
bottom: 64px;
right: 0;
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;
min-width: 300px;
border-radius: 16px;
box-shadow: 0 0 10px #000;
font-size: 12px;
text-align: initial;
white-space: initial;
line-height: 1.5;
}

.hlx-popup a:any-link {
Expand All @@ -100,19 +129,25 @@
display: inline-block;
border-radius: 20px;
text-decoration: none;
word-break: normal;
}

.hlx-popup-header {
display: grid;
grid-area: header;
grid-template:
"label actions"
"label actions"
"description actions"
/ 1fr min-content;
background-color: #222;
border-radius: 16px 16px 0 0;
padding: 24px 16px;
gap: 0 16px;
}

.hlx-popup-items {
overflow-y: auto;
grid-area: content;
scrollbar-gutter: stable;
scrollbar-width: thin;
}

.hlx-popup-header-label {
Expand All @@ -129,11 +164,8 @@
flex-direction: column;
}

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

.hlx-popup h4 {
Expand All @@ -144,27 +176,22 @@
font-size: 14px;
}

.hlx-popup p,
.hlx-popup code {

.hlx-popup p {
margin: 0;
padding: 0;
background: inherit;
border: inherit;
color: inherit;
font-size: inherit;
line-height: 1.5;
}

.hlx-popup::before {
content: "";
content: '';
width: 0;
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: 30px;
right: 50%;
transform: translateX(50%);
}

.hlx-hidden {
Expand All @@ -173,28 +200,29 @@

.hlx-badge.is-active,
.hlx-badge[aria-pressed="true"] {
background-color: #280;
--color: #280;
}

.hlx-badge.is-inactive,
.hlx-badge[aria-pressed="false"] {
background-color: #fa0f00;
--color: #fa0f00;
}

.hlx-popup-item {
display: grid;
grid-template:
"label actions"
"label actions"
"description actions"
/ 1fr min-content;
margin: 16px;
padding: 16px;
border-radius: 16px;
gap: 0 16px;
margin: 1em;
padding: 1em;
border-radius: 1em;
gap: .5em 1em;
}

.hlx-popup-item-label {
grid-area: label;
white-space: nowrap;
}

.hlx-popup-item-description {
Expand All @@ -215,10 +243,47 @@
flex: 0 0 auto;
}

/* stylelint-disable-next-line media-feature-range-notation */
@media (min-width: 900px) {
@media (width >= 600px) {
.hlx-highlight {
--highlight-size: .75rem;
}

.hlx-preview-overlay {
right: 1em;
align-items: end;
font-size: 1.25rem;
}

.hlx-popup {
right: 0;
left: auto;
transform: none;
min-width: 300px;
bottom: 8em;
}

.hlx-popup::before {
right: 26px;
transform: none;
}
}

@media (width >= 900px) {
.hlx-highlight {
--highlight-size: 1rem;
}

.hlx-preview-overlay {
flex-flow: row-reverse wrap-reverse;
justify-content: flex-start;
flex-flow: row wrap-reverse;
justify-content: flex-end;
font-size: 1.5rem;
}

.hlx-popup {
bottom: 9em;
}

.hlx-popup::before {
right: 32px;
}
}
Loading

0 comments on commit 2baa0d7

Please sign in to comment.