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

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

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

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

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

Настройка

  1. Скопируйте код ниже: 

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
    <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>

  2. Отредактируйте этот код согласно вашим задачам: добавьте нужное количество тестов, опишите действия, которые должны происходить при срабатывании каждого из вариантов.

  3. Вставьте получившийся код на ваш сайт выше кода счетчика Roistat.

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

Например, можно менять цвет элемента в зависимости от значения А/Б-теста, чтобы проверить, какой цвет элемента лучше работает:

  1. Установите и настройте скрипт, указанный выше.

  2. Напишите код, который меняет цвет элемента в зависимости от значения А/Б-теста: 

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