Перейти к содержанию

Программируемый тест на JavaScript

Принцип работы

Вы можете настроить программируемый А/Б-тест с помощью JavaScript. Например, это может пригодиться, если вы хотите настроить тест в Tilda или другом конструкторе сайтов.

Настройка происходит следующим образом: в коде сайта выше кода счетчика устанавливается скрипт с cookie roistat_ab, в которой передается информация о тесте. Затем данные о варианте теста отправляются в Roistat вместе с данными счетчика.

Настройка

На сайте установите следующий скрипт выше кода счетчика. Внимание в скрипте указываются настройки тестов - сколько тестов и какие у них варианты. Эти значения необходимо указать под ваши задачи:

<script>

    const ROISTAT_AB_COOKIE = "roistat_ab";
    const ROISTAT_AB_SUBMITTED_COOKIE = "roistat_ab_submit";

    const COOKIE_EXPIRE = 7*24*60*60;
    const COOKIE_CONFIG = { expires: COOKIE_EXPIRE, path: '/'};

    var testsConfig = [
        {
            'id': 'myTest1',
            'variants': ['a','b']
        },
        {
            'id': 'myTest2',
            'variants': ['a','b']
        }
    ];

    var testValues = [];
    var roistatAbCookieValues = [];

    //Работает только в случае, если нет куки с информацией о том, что уже применили настройки теста
    if (getCookieValue(ROISTAT_AB_SUBMITTED_COOKIE) != '1') {

        // Для каждого теста проверяем, есть ли уже установленное значение в куке конкретного теста. Если есть - используем его, если нет - берём случайное значение из вариантов теста и устанавливаем в куку
        for (var i = 0; i < testsConfig.length; i++) {
            var testId = testsConfig[i].id;
            var testValue = getCookieValue(testId);

            if (typeof testValue === 'undefined') {
                testValue = testsConfig[i].variants[getRandomInt(0,testsConfig[i].variants.length-1)];
                setCookieValue(testId,testValue,COOKIE_CONFIG);
            } else {
                testValue = getCookieValue(testId);
            }
            testValues.push({'id' : testId, 'value' : testValue});
        }

        // Устанавливаем куку Roistat для А/Б-тестов
        for (var i = 0; i < testValues.length; i++) {
            roistatAbCookieValues.push(testValues[i].id+":"+testValues[i].value);
        }
        setCookieValue(ROISTAT_AB_COOKIE,roistatAbCookieValues.join(','),COOKIE_CONFIG);

        //Устанавливаем куку с информацией о том, что мы применили настройки теста
        setCookieValue(ROISTAT_AB_SUBMITTED_COOKIE,'1',COOKIE_CONFIG);

    } 

    //Вспомогательные функции    
    function getRandomInt (min,max) {min = Math.ceil(min);max = Math.floor(max);return Math.floor(Math.random() * (max - min + 1)) + min;}
    function getCookieValue (name) {var matches = document.cookie.match(new RegExp("(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"));return matches ? matches[1] : undefined;};
    function setCookieValue (name, value, options) {options = options || {};var expires = options.expires;if (typeof expires == "number" && expires) {var d = new Date();d.setTime(d.getTime() + expires*1000);expires = options.expires = d;}if (expires && expires.toUTCString) { options.expires = expires.toUTCString();}value = encodeURIComponent(value);var updatedCookie = name + "=" + value;for(var propName in options) {updatedCookie += "; " + propName;var propValue = options[propName];    if (propValue !== true) { updatedCookie += "=" + propValue;}}document.cookie = updatedCookie;};

</script>

Пример использования теста

Например, менять цвет эленмета в зависимости от значения аб-теста (аб-тестируем какой цвет элемента лучше работает): 1) Установить и настроить скрипт, указанный выше 2) Прописать код, который меняет цвет элемента в зависимости от значения аб-теста:

//Пример теста с заменой цвета заголовка страницы
if(getCookieValue('myJsTestForTitle') == 'red'){
    document.getElementsByTagName('h1')[0].style.color = 'red';
}
if(getCookieValue('myJsTestForTitle') == 'green'){
    document.getElementsByTagName('h1')[0].style.color = 'green';
}