codeSchmiede A/B Testing Toolkit

• Getting started
  • Install
  • Usage Example
• Helper
  • waitFor
  • waitForSync
  • share
  • exec
  • ready
  • punshout
  • pushHistory
  • persistElem
• Wrapper
  • qs
  • qsa
• Utils
  • scrollTo
  • isMobile
  • getWidth
  • getCookie
  • getStore
  • setStore
• License

Getting started

This toolkit is designed to help you creating A/B tests. Have fun using it!

Questions or feedback? [email protected]

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

JavaScript Cookies

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).

codeSchmiede GmbH & Co. KG