Менеджер фрагментов кода Cacher дает вам и вашей команде возможность делать больше и быстрее. Попробуйте все функции бесплатно.
TL; DR: просмотрите фрагмент этого сообщения в блоге.
В течение последних нескольких месяцев мы были сосредоточены почти исключительно на создании функций Cacher (интеграции VSCode, Atom и Sublime) с очень небольшим количеством маркетинговых средств. Дизайн нашего маркетингового сайта практически не изменился с момента его запуска в сентябре 2017 года.
С появлением такого количества функций домашнюю страницу потребовалось обновить, чтобы отразить все дополнительные преимущества. Я поставил себе задачу проверить, помогают ли изменения на сайте коэффициенту конверсии пользователей.
На маркетинговом языке пробовать разные варианты одной и той же страницы, чтобы найти лучшего исполнителя, называется A / B-тестирование. Эти тесты (или эксперименты) представляют собой периоды, в течение которых вариации выполняются одновременно на подгруппах пользователей с целью анализа и вывода результатов. По окончании эксперимента вы можете сделать выигрышный вариант доступным для всех.
Требования
В своем первом эксперименте я проверял, приводит ли пользователь, загружающий настольный клиент Cacher или посещающий веб-приложение, к более высокому шансу регистрации.
Я инженер по профессии и не настраивал cacher.io, как это обычно делают многие маркетологи, используя тяжелые CMS, такие как Wordpress или Drupal. Маркетинговый сайт использует Jekyll, полностью статичен и не имеет базы данных. Поскольку я достаточно хорошо знаю HTML / (S) CSS, я не чувствовал необходимости платить за более удобные для пользовательского интерфейса инструменты, такие как Optimizely или Unbounce. Вместо этого я решил объединить Mixpanel и немного Javascript, чтобы провести свой собственный легкий эксперимент.
Тестирование с Алефбет
Посмотрев на ABalytics.js и signalerjs, я остановился на AlephBet из-за его отличной документации и возможности устанавливать веса для вариантов. Хотя вы можете выбрать библиотеку с меньшим количеством функций, вам все равно нужно что-то, что может гарантировать, что конкретный пользователь получит один и тот же вариант при каждом посещении страницы.
Шаг 1. HTML
Вот упрощенная версия HTML, участвующего в эксперименте.
// index.html <span data-variant="download" data-block> <button>Download for Mac OS</button> </span> <span data-variant="visit_web" data-block> <button>Get Started</button> </span>
Почему атрибуты data-variant? Я буду использовать их в CSS и JS ниже, чтобы переключать видимость элементов.
Шаг 2. Скройте элементы
Я должен был убедиться, что Javascript должен определять, какую версию пользовательского интерфейса отображать. Я спрятал все элементы HTML в эксперименте с CSS и добавил отдельный класс, который можно было бы включить.
// tests.scss
*[data-variant] {
display: none;
&.variant-visible {
display: inline-block;
&[data-block] {
display: block;
}
&[data-inline] {
display: inline;
}
}
}
Обратите внимание, что я использовал настраиваемые атрибуты data-, чтобы указать, должен ли элемент отображаться как inline, inline-block или block.
Шаг 3. Инициализируйте эксперимент
Когда загружается домашняя страница, начинается эксперимент. Чтобы упростить настройку будущих экспериментов, я написал функцию-оболочку для Experiment инициализации Alephbet. Обратите внимание, что в приведенном ниже коде я использовал функцию document.ready() jQuery, чтобы сначала загрузить весь HTML.
// testing.js
function newExperiment(name, variants) {
var args = {
name: name,
variants: {}
};
_.each(_.keys(variants), function(variant) {
args.variants[variant] = {
activate: function() {
$('*[data-variant="' + variant + '"]').addClass("variant-visible");
},
weight: variants[variant]
};
});
new AlephBet.Experiment(args);
}
$(function() {
newExperiment("homepage", {
download: 50,
visit_web: 50
});
});
Метод newExperiment() выполняет несколько функций: (1) инициализирует эксперимент с весами вариантов и (2) показывает любой элемент с атрибутом data-variant-[download|visit_web], если пользователь выбирает этот вариант.
В данном случае я поставил эксперимент с двумя вариантами (вы можете сделать больше), каждый из которых показан 50% посетителей сайта.
Шаг 4. Отслеживайте события с помощью Mixpanel
Я решил использовать Mixpanel для отслеживания результатов этого эксперимента, но вы можете использовать другую аналитическую службу. Alephbet поставляется со встроенной поддержкой Google Analytics, так что это будет еще один прекрасный выбор.
// tracking.js
function testingStore() {
var store = localStorage.getItem('alephbet');
if (store) {
return JSON.parse(store);
} else {
return null;
}
}
function mixpanelTrack(event, data) {
data = data || {};
var store = this.testingStore();
if (store) {
_.each(_.keys(store), function(key) {
if (key.indexOf("variant") >= 0) {
var tokens = key.split(":");
data["experiment:" + tokens[0]] = store[key];
}
});
}
mixpanel.track(event, data);
}
testingStore() берет данные localStorage, которые Alphebet использует для отслеживания экспериментов, и возвращает их значение JSON. Функции _.each и _.keys взяты из lodash.
Для каждого события я отправил каждый эксперимент и его активный вариант как свойства события Mixpanel.
Я добавил строку JS на домашнюю страницу, чтобы указать, что пользователь посетил:
// index.html
<script>
$(function() {
mixpanelTrack('visited homepage');
});
</script>
На странице успешной регистрации я добавил еще одну строку для отслеживания регистрации пользователя.
// signup-success.html
<script>
$(function() {
mixpanelTrack('user registered');
});
</script>
Шаг 5. Настройте воронки в Mixpanel
Я создал новую воронку в Mixpanel для варианта кнопки загрузки домашней страницы:
Обратите внимание: поскольку я отправил все эксперименты как свойства события, experiment:homepage можно было выбрать для обоих событий. Для этой воронки было установлено значение download. Я также создал еще одну воронку со значением visited_web в качестве значения experiment:homepage.
Шаг 6: Подождите
После того, как я настроил воронки и внедрил изменения на веб-сайте, я стал ждать результатов. Как долго я ждал? У Нила Пателя есть удобный Калькулятор A / B-тестирования, который подскажет мне. Чтобы внести изменения в маркетинговый сайт, я обычно жду достаточного количества посетителей, чтобы ›уверенность в тестах составила 95%. В зависимости от посещаемости вашего собственного веб-сайта это может означать ожидание от нескольких часов до нескольких дней.
Шаг 7. Посмотрите на результаты
Проведя эксперимент в течение некоторого времени, я получил следующие результаты:
Ввод этих чисел в калькулятор A / B-тестирования дал мне следующее:
В этом случае пользователи с большей вероятностью регистрировались после посещения веб-приложения Cacher по сравнению с загрузкой настольного клиента. Это имеет интуитивно понятный смысл, поскольку могут возникнуть некоторые трения, связанные с установкой программного обеспечения по сравнению с опробованием его в Интернете. Поскольку я был уверен в выводе, сделанном в результате эксперимента, с тех пор я изменил домашнюю страницу, чтобы по умолчанию посетители направлялись в веб-приложение.
Зачем катить собственное?
С популяризацией A / B-тестирования, безусловно, появился ряд установленных сервисов для запуска тестов и сбора результатов. Если вы профессионал в области маркетинга, который не хочет (или вам не разрешено) трогать код, вам подойдет такой инструмент, как Optimizely. С другой стороны, если вы инженер, который предпочитает детальный контроль над тем, что происходит на странице, нет лучшего варианта, чем написать собственный фреймворк.
Хотите запомнить эту технику? Сохраните фрагмент этого сообщения в блоге в своей библиотеке Cacher.
Cacher - органайзер фрагментов кода для профессиональных разработчиков - красивый пользовательский интерфейс, интеграция с популярными редакторами / IDE, поддержка более 100 языков.
Зарегистрируйтесь на cacher.io.
