Программируемый тест на 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>
-
Отредактируйте этот код согласно вашим задачам: добавьте нужное количество тестов, опишите действия, которые должны происходить при срабатывании каждого из вариантов.
-
Вставьте получившийся код на ваш сайт выше кода счетчика Roistat.
Пример использования теста¶
Например, можно менять цвет элемента в зависимости от значения А/Б-теста, чтобы проверить, какой цвет элемента лучше работает:
-
Установите и настройте скрипт, указанный выше.
-
Напишите код, который меняет цвет элемента в зависимости от значения А/Б-теста:
//Пример теста с заменой цвета заголовка страницы if(getCookieValue('myJsTestForTitle') == 'red'){ document.getElementsByTagName('h1')[0].style.color = 'red'; } if(getCookieValue('myJsTestForTitle') == 'green'){ document.getElementsByTagName('h1')[0].style.color = 'green'; }