@douglas.onsite.experimentation/douglas-ab-testing-toolkit v2.0.0
DOUGLAS A/B Testing Toolkit
Getting started
This toolkit is designed to help you creating A/B tests. Have fun using it!
Questions or feedback? ma.vith@douglas.de
Install
Install with npm:
npm install douglas-toolkitInstall with yarn:
yarn add douglas-toolkitUsage Example
import { elem } from 'douglas-toolkit';
elem('#example', (example) => {
// do something...
});Helper
elem
The elem function is using document.querySelector() internally.
elem('.example', (example) => {
// do something...
});elem is also working with a function as a selector.
elem(
() => return window.example === true,
() => {
// do something...
}
);elemSync
(async () => {
const body = await elemSync("body");
// do something...
})();share
If you want to share JavaScript code between multiple files, you can use the share function.
// file: global.js
share("globalFunc", () => {
console.log("run my global func");
});// file: variation.js
window.DG_TOOLKIT.globalFunc();The share function returns window.DG_TOOLKIT, if you want to use it directly.
exec
// file: variation.js
exec('globalFunc', ['param_a', 'param_b']);ready
DISABLED
The ready function is using the DOMContentLoaded Event.
ready(() => {
// do something...
});punshout
DISABLED
The punshout function executes your callback function, if the breakpoint is lower as specified, in the example 1024px.
punshout(1024, () => {
// do something...
// ...exclude visitor from your experiment
});pushMetric
You can use the pushMetric function for sending goals or segments (unique and multiple).
Sending a multiple goal
pushMetric('example-key');Sending a unique goal
pushMetric('example-key', 'metric', true);Sending a multiple segment
pushMetric('example-key', 'segment', false);Sending a unique segment
pushMetric('example-key', 'segment', true);Sending a goal and segment multiple
pushMetric('example-key', 'both');Sending a goal and segment unique
pushMetric('example-key', 'both', true);pushHistory
pushHistory('myStep');persistElem
DISABLED
The persistElem function automatically checks if your new element still exists each 50 ms. If not, your callback function is executed again. After 2.5 seconds the function terminates itself.
/**
* persistElem
*
* @param {string} selector
* @param {function} callback
* @param {number} runs [optional]
* @param {number} speed [optional]
*/
persistElem('my-new-element', async (resolve, reject) => {
try {
const target = await elemSync('header');
target.insertAdjacentHTML('afterbegin',
'<my-new-element>example</my-new-element>'
);
resolve();
} catch(err) {
reject();
}
});Wrapper
qs
The qs function is just a wrapper for document.querySelector().
An Element object representing the first element in the document that matches the specified set of CSS selectors, or null is returned if there are no matches.
const node = qs('#example');
// do something...
node.textContent = 'My new text...';qsa
The qsa function is just a wrapper for document.querySelectorAll().
A non-live NodeList containing one Element object for each element that matches at least one of the specified selectors or an empty NodeList in case of no matches.
const nodeList = qsa('.example');
// do something...
[...nodeList].forEach(item => { ... });addPrefix
addPrefix('ux1234__example-class');removePrefix
removePrefix('ux1234__example-class');setClickEvent
The setClickEvent function polls for the transferred selector and automatically creates a click event. In addition, a data attribute is created on the element so that no further click events are created when it is executed again.
setClickEvent('.example-class', 'ux3880__', 'add-to-cart');Observer Functions
addTask
Adds a new task to the DOUGLAS Toolkit observer.
addTask('UX1234', () => {});removeTask
Removes a task from the DOUGLAS Toolkit observer by name.
removeTask('UX1234');updateConfig
Updates the observer configuration with a new config object.
updateConfig({attributes: true});Data Functions
getState
Retrieves the current state from the System store.
const state = getState();getDataClient
Retrieves the data client, if available.
const dataClient = getDataClient();getProdId
This function returns product ID, taken from the current page url.
const productId = getProdId();getProduct
Fetches product data for the current page.
const product = getProduct();getProducts
Retrieves cached products from overview or search results pages.
const products = getProducts();Utils
scrollTo
const scrollToPosition = 2000;
const scrollSpeed = 500;
scrollTo(scrollToPosition, scrollSpeed);inViewport
if(inViewport('#example-id', () => {
}));isElementInViewport
const elem = elem('#example-id');
if(isElementInViewport(elem)) {
// element is in my viewport
}isMobile
const isMobileDevice = isMobile();
if(isMobileDevice){
// do something for mobile traffic...
} else {
// do something for desktop traffic...
}getWidth
const browserWidth = getWidth();
// do something...getCookie
const myCookkie = getCookie('myCookie');
// do something...getStore
getStore('csExampleObject');
getStore('csExampleObject', 'csExampleKey');setStore
setStore('csExampleObject', 'csExampleKey', 'csExampleValue');getPage
This function returns home, pop, pdp, brand, search, login or confirm depending on what page you are.
If true is passed to it, it returns checkout or no-checkout.
const currentPage = getPage();
const currentPage = getPage(true);log
Logs messages in a custom format for the DOUGLAS Toolkit.
log('UX-1234*variant');Hotjar
hotjar('viewed*UX-1234*variant');License
Copyright (c) 2024 PARFÜMERIE Douglas GmbH & CO. KG.
Licensed under The MIT License (MIT).