Код позволяет случайно в равных пропорциях разделить пользователей на сайте на любое количество сегментов для проведения A/B/N тестирования.
var numberOfSegments = 2;
retailrocket.segmentator.getVisitorSegment(numberOfSegments);
Результатом работы кода будет номер сегмента (начиная с 1), в который попал пользователь. Принадлежность пользователя к сегменту сохраняется в cookie на 2 месяца и обновляется до двух месяцев при каждом срабатывании кода.
- Файл
retailrocket.segmentator.jsсохраняется в директорию сайта и подключается внутри<head>, например так:
<script type="text/javascript" src="/path/to/retailrocket.segmentator.js"></script>
- Сразу после подключения файла размещается код
<script type="text/javascript">
var numberOfSegments = 2;
var visitorSegment = retailrocket.segmentator.getVisitorSegment(numberOfSegments);
</script>
- После того, как пользователь отнесен на сегмент, необходимо показать ему соответствующий вариант сайта/страницы. Возможные варианты:
3.1. Переадресация на альтернативный вариант страницы
<script type="text/javascript">
var visitorSegment = retailrocket.segmentator.getVisitorSegment(numberOfSegments);
if(visitorSegment==1 && document.location.pathname=="path/to/pageBeingTested.html") {
window.location = "http://yourwebsite.com/path/to/alternative.html";
}
</script>
3.2. Отображение одного из вариантов кнопки (или любого другого элемента интерфейса). Для этого все вариации тестируемого элемента интерфейса выводятся на страницу со стилем display:none, а затем, в зависимости от того, в какой сегмент попал пользователь, один из скрытых элементов меняет стиль на display:block
<script type="text/javascript">
var visitorSegment = retailrocket.segmentator.getVisitorSegment(numberOfSegments);
$(function() {
if(visitorSegment == 1) {
$(".button_ver1").css('display','block'); // на сайте выше по коду должна быть подключена библиотека jQuery
} else if (visitorSegment == 2){
$(".button_ver2").css('display','block'); // на сайте выше по коду должна быть подключена библиотека jQuery
}
});
</script>
- Последним шагом является передача идентификатора сегмента в систему веб-аналитики для проведения пост-тест анализа.
<script type="text/javascript" src="/path/to/retailrocket.segmentator.js"></script>
<script type="text/javascript">
var numberOfSegments = 2;
var visitorSegment = retailrocket.segmentator.getVisitorSegment(numberOfSegments);
var variation = 'Variation ' + visitorSegment;
$(function () {
if (visitorSegment == 1) {
$(".button_ver1").css('display', 'block'); // на сайте выше по коду должна быть подключена библиотека jQuery
} else if (visitorSegment == 2) {
$(".button_ver2").css('display', 'block'); // на сайте выше по коду должна быть подключена библиотека jQuery
}
});
</script>
Затем в трекинг-коде Universal Analytics (который должен располагаться после приведенного выше кода), необходимо сделать вызов:
ga('send', 'event', 'A/B Test', variation);
Пример тестирования двух вариантов главной страницы с отправкой идентификатора сегмента в Яндекс.Метрика
<script type="text/javascript" src="/path/to/retailrocket.segmentator.js"></script>
<script type="text/javascript">
var numberOfSegments = 2;
var visitorSegment = retailrocket.segmentator.getVisitorSegment(numberOfSegments);
if (visitorSegment == 1 && document.location.pathname == "path/to/oldVersion.html") {
window.location = "http://yourwebsite.com/path/to/newVersion.html";
} else if (visitorSegment == 2 && document.location.pathname == "path/to/oldVersion.html") {
var yaParams = {
ab_test: 'Старая версия'
};
}
else if(visitorSegment == 1 && document.location.pathname == "/path/to/newVersion.html") {
var yaParams = {
ab_test: 'Новая версия'
};
}
else if(visitorSegment == 2 && document.location.pathname == "/path/to/newVersion.html") {
window.location = "http://yourwebsite.com/path/to/oldVersion.html";
}
</script>
Затем в трекинг-коде Яндекс.Метрики (который должен располагаться после приведенного выше кода) создаем объект счетчика и указываем свойство params c нашими параметрами:
new Ya.Metrika({id: XXXXXX, params: yaParams});