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

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

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

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

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

Настройка

В блоке с типом HTML установите следующий скрипт выше кода счетчика:

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