diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 0000000..27eb249 --- /dev/null +++ b/CHANGELOG.md @@ -0,0 +1,6 @@ +## [1.0.1](https://github.com/adobe/aem-experimentation/compare/v1.0.0...v1.0.1) (2024-05-24) + + +### Bug Fixes + +* semantic release ([5040fa8](https://github.com/adobe/aem-experimentation/commit/5040fa88c7a01b032431967e230abaaf6d69f9d6)) diff --git a/README.md b/README.md index d2f6b6b..f891d97 100644 --- a/README.md +++ b/README.md @@ -28,30 +28,6 @@ If you prefer using `https` links you'd replace `git@github.com:adobe/aem-experi ## Project instrumentation -### On top of the plugin system - -The easiest way to add the plugin is if your project is set up with the plugin system extension in the boilerplate. -You'll know you have it if either `window.aem.plugins` or `window.hlx.plugins` is defined on your page. - -If you don't have it, you can follow the proposal in https://github.com/adobe/aem-lib/pull/23 and https://github.com/adobe/aem-boilerplate/pull/275 and apply the changes to your `aem.js`/`lib-franklin.js` and `scripts.js`. - -Once you have confirmed this, you'll need to edit your `scripts.js` in your AEM project and add the following at the start of the file: -```js -const AUDIENCES = { - mobile: () => window.innerWidth < 600, - desktop: () => window.innerWidth >= 600, - // define your custom audiences here as needed -}; - -window.aem.plugins.add('experimentation', { // use window.hlx instead of your project has this - condition: () => getMetadata('experiment') - || Object.keys(getAllMetadata('campaign')).length - || Object.keys(getAllMetadata('audience')).length, - options: { audiences: AUDIENCES }, - url: '/plugins/experimentation/src/index.js', -}); -``` - ### On top of a regular boilerplate project Typically, you'd know you don't have the plugin system if you don't see a reference to `window.aem.plugins` or `window.hlx.plugins` in your `scripts.js`. In that case, you can still manually instrument this plugin in your project by falling back to a more manual instrumentation. To properly connect and configure the plugin for your project, you'll need to edit your `scripts.js` in your AEM project and add the following: @@ -69,12 +45,11 @@ Typically, you'd know you don't have the plugin system if you don't see a refere async function loadEager(doc) { … // Add below snippet early in the eager phase - if (getMetadata('experiment') - || Object.keys(getAllMetadata('campaign')).length - || Object.keys(getAllMetadata('audience')).length) { + 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-relative-packages const { loadEager: runEager } = await import('../plugins/experimentation/src/index.js'); - await runEager(document, { audiences: AUDIENCES }); + await runEager(document, { audiences: AUDIENCES, prodHost: 'www.my-site.com' }); } … } @@ -85,17 +60,39 @@ Typically, you'd know you don't have the plugin system if you don't see a refere async function loadLazy(doc) { … // Add below snippet at the end of the lazy phase - if ((getMetadata('experiment') - || Object.keys(getAllMetadata('campaign')).length - || Object.keys(getAllMetadata('audience')).length)) { + 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-relative-packages const { loadLazy: runLazy } = await import('../plugins/experimentation/src/index.js'); - await runLazy(document, { audiences: AUDIENCES }); + await runLazy(document, { audiences: AUDIENCES, prodHost: 'www.my-site.com' }); } } ``` This is mostly used for the authoring overlay, and as such isn't essential to the page rendering, so having it at the end of the lazy phase is good enough. +### On top of the plugin system + +The easiest way to add the plugin is if your project is set up with the plugin system extension in the boilerplate. +You'll know you have it if either `window.aem.plugins` or `window.hlx.plugins` is defined on your page. + +If you don't have it, you can follow the proposal in https://github.com/adobe/aem-lib/pull/23 and https://github.com/adobe/aem-boilerplate/pull/275 and apply the changes to your `aem.js`/`lib-franklin.js` and `scripts.js`. + +Once you have confirmed this, you'll need to edit your `scripts.js` in your AEM project and add the following at the start of the file: +```js +const AUDIENCES = { + mobile: () => window.innerWidth < 600, + desktop: () => window.innerWidth >= 600, + // define your custom audiences here as needed +}; + +window.aem.plugins.add('experimentation', { // use window.hlx instead of your project has this + condition: () => document.head.querySelector('[name^="experiment"],[name^="campaign-"],[name^="audience-"]') + || [...document.querySelectorAll('.section-metadata div')].some((d) => d.textContent.match(/Experiment|Campaign|Audience/i)), + options: { audiences: AUDIENCES, prodHost: 'www.my-site.com' }, + url: '/plugins/experimentation/src/index.js', +}); +``` + ### Custom options There are various aspects of the plugin that you can configure via options you are passing to the 2 main methods above (`runEager`/`runLazy`). diff --git a/package.json b/package.json index 68eb136..2c2741c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@adobe/aem-experimentation", - "version": "1.15.1", + "version": "1.0.1", "main": "src/index.js", "scripts": { "lint:js": "eslint src",