📊A/B Test

See the result!

Getting Started with A/B Testing

You can easily set up A/B testing and measure conversion rates by using our mazingSetAB() method.

Simply add the following code block at the beginning of your integration file:

await waitForMazingFunction; // Wait till mazing cdn method is available
// Write a method which waits for certain elements and replace
// the selector with you own add to cart button selector
await waitForElement('.buy-buttons button[type="submit"]');

mazingSetAB({
    enabled: true, // Set this boolean to "false" if you want to deactivate the A/B Test
    addToCartListeners: (callback) => {

        // Replace selector with your actual add to cart button selector
        document.querySelector('.buy-buttons button[type="submit"]').addEventListener('click', () => {
            console.log('MAZING: addToCartClicked A/B');
            callback();
        });

        return true;
    }
});

It's important to add this before you get the iframe source! See -> Script Integration Example

What's happening?

await waitForMazingFunction

This method waits until the Mazing function from the CDN is fully loaded and available. Here’s an example of how you can use it:

const waitForMazingFunction = new Promise((resolve) => {
    const interval = 50;
    const checkInterval = setInterval(() => {
        if (typeof mazing === 'function') {
            clearInterval(checkInterval);
            resolve();
        }
    }, interval);
});

await waitForElement()

This method waits until a specific element (e.g., the "Add to Cart" button) is fully loaded and available in the DOM. You pass a CSS selector as an argument. Here’s an example:

const waitForElement = (selector, timeout = 55000) => {
    return new Promise((resolve) => {
        const interval = 50;
        let elapsedTime = 0;

        const checkInterval = setInterval(() => {
            const element = document.querySelector(selector);
            if (element) {
                clearInterval(checkInterval);
                resolve(element);
            } else if ((elapsedTime += interval) >= timeout) {
                clearInterval(checkInterval);
                resolve();
            }
        }, interval);
    });
};

mazingSetAB()

Each time a customer visits your shop, they will be randomly assigned to either Group A (with the Mazing script integration) or Group B (without the integration). We track how many users click the “Add to Cart” button in each group and compare the results to calculate the conversion rate.

If you're interested in accessing the results, feel free to contact the Mazing team!

Don't forget to replace the add to cart selector with your actual selector!