Примеры условий запуска теста

Что такое условие запуска теста

Во многих случаях A/B тест следует запускать не на всех страницах сайта, а только при наличии определенных условий. Не всегда заранее можно определить точные адреса страниц, где эти условия выполнятся. Например, нужно запускать тест только на тех страницах, где есть элемент с классом "big-button". Тогда JS-условие может быть таким:

$('.big-button').length != 0

Пример задачи: запустить тест только на мобильных устройствах

Представим, что нужно запускать A/B тест только на мобильных устройствах, при этом дизайн сайта адаптивный и URL страниц не отличаются в зависимости от типа устройства. Скрипт теста мы установим на все страницы сайта, а условие запуска определим через JS. Иногда можно решить эту проблему, измерив ширину экрана, например, так:

screen.width <= 500

или прочитав userAgent:

/mobi|phone|ipod|nokia|android/i.test(navigator.userAgent)

но такие способы не всегда будут точными.

Определение типа устройства через CSS-правила

Универсальным способом будет определение типа устройства через CSS-правила. Ведь смысл задачи не в том, чтобы определить действительно мобильное устройство, а в том, чтобы понять, что браузер сейчас показывает пользователю версию дизайна для мобильных устройств. Такая задача намного легче.

Адаптивный дизайн в подавляющем большинстве случаев – значит применение разных настроек CSS через @media-правила. Для определения мобильной версии дизайна нам нужно узнать отличительную особенность какого-то элемента внутри @media-правила, которое соответствует мобильному устройству. Например, мы прочитали в CSS-файле, что размер шрифта заголовка h1 для мобильных устройств составляет 36px, и этот размер является таким только для мобильных устройств. С помощью JS мы можем прочитать это CSS-свойство и сравнить его с нужным нам "36px". Получим условие запуска теста:

$('h1').css('font-size') == '36px'

Важно, чтобы тот элемент, по которому мы проверяем тип устройства, существовал на всех страницах сайта. Таким элементом, как правило, будет заголовок h1 или логотип сайта. Если общего элемента на всех страницах не существует, то его придется сначала внедрить на страницу средствами JS, затем измерить его CSS-свойство, потом удалить. Для пользователя этот процесс будет незаметен - элемент может быть невидимым, создаваемым только для проверки типа устройства.

Пример CSS и JS для определения типа устройства

Ищем в CSS-правилах @media-описания элементов, отвечающие за адаптивность. Например, размеры логотипа для разных разрешений экрана:

/* мобильные устройства */
@media all and (min-width:0px) and (max-width:641px) {
	#logo{width:108px;height:45px}
}

/* планшеты или PC с низким разрешением */
@media all and (min-width:642px) and (max-width:1357px) {
	#logo{width:173px;height:72px}
}

/* desktop или крупный планшет */
@media all and (min-width:1358px) and (max-width:1427px) {
	#logo{width:216px;height:90px}
}

Пишем JS-условия для определения, какая версия дизайна сейчас показывается пользователю:

$('#logo').css('width')=='108px' //мобильное устройство

$('#logo').css('width')=='173px' //планшет или старый PC с низким разрешением

$('#logo').css('width')=='216px' //полная версия, desktop или крупный планшет

Примечание о jQuery

Для работы примеров из этой статьи на вашем сайте должна быть установлена библиотека jQuery.