DOUGLAS A/B Testing Toolkit

• Getting started
  • Install
  • Usage Example
• Helper
  • elem
  • elemSync
  • share
  • exec
  • ready
  • punshout
  • pushMetric
  • pushHistory
  • persistElem
• Wrapper
  • qs
  • qsa
  • addPrefix
  • removePrefix
  • setClickEvent
• Observer Functions
  • addTask
  • removeTask
  • updateConfig
• Data Functions
  • getState
  • getDataClient
  • getProdId
  • getProduct
  • getProducts
• Utils
  • scrollTo
  • inViewport
  • isElementInViewport
  • isMobile
  • getWidth
  • getCookie
  • getStore
  • setStore
  • getPage
  • log
• Hotjar
• License

Getting started

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

Questions or feedback? [email protected]

Install

Install with npm:

npm install douglas-toolkit

Install with yarn:

yarn add douglas-toolkit

Usage 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 = await getState();

getDataClient

Retrieves the data client, if available.

const dataClient = await 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 = await getProduct();

getProducts

Retrieves cached products from overview or search results pages.

const products = await 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

JavaScript Cookies

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

PARFÜMERIE Douglas GmbH & CO. KG