codeSchmiede A/B Testing Toolkit
Getting started
This toolkit is designed to help you creating A/B tests. Have fun using it!
Questions or feedback?
team@codeschmiede.de
Install
$ npm install codeschmiede-toolkit
$ yarn add codeschmiede-toolkit
Usage Example
import { waitFor } from 'codeschmiede-toolkit';
waitFor('#example', (example) => {
// do something...
});
Helper
waitFor
The waitFor
function is using document.querySelector() internally.
waitFor('.example', (example) => {
// do something...
});
waitFor
is also working with a function as a selector.
waitFor(
() => return window.example === true,
() => {
// do something...
}
);
waitForSync
(async () => {
const body = await waitForSync("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("da");
});
// file: variation.js
window.CS_TOOLKIT.globalFunc();
The share function returns window.CS_TOOLKIT
, if you want to use it directly.
exec
// file: variation.js
exec('globalFunc', ['param_a', 'param_b']);
ready
The ready
function is using the DOMContentLoaded Event.
ready(() => {
// do something...
});
punshout
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
});
pushHistory
pushHistory('myStep');
persistElem
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 waitForSync('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 => { ... });
Utils
scrollTo
const scrollToPosition = 2000;
const scrollSpeed = 500;
scrollTo(scrollToPosition, scrollSpeed);
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');
License
Copyright (c) 2022 codeSchmiede GmbH & Co. KG.
Licensed under The MIT License (MIT).