Младший редактор рубрики Growth Hacks Егор Данилов в начале июня устроил A/B тестирование социальных кнопок на дружественном нам ресурсе TJournal. Сегодня, спустя несколько недель, он готов поделиться промежуточными результатами и подготовил небольшую задачку читателям.
Хотел провести этот эксперимент уже тысячу лет назад. Постоянно не покидало чувство, что кнопки социальных сетей совершенно бесполезны с точки зрения объема трафика. Пару месяцев назад я предложил ребятам из TJournal провести A/B тест, в котором мы узнаем, какие кнопки социальных сетей работают для их проекта лучше всего.
Выбор кнопок и соцсетей
Выбирать соцсети не пришлось - на TJournal уже был набор из "ВКонтакте", Facebook, Twitter, Surfingbird и Google+. Менять привычный набор я не стал.
Очевидными кандидатами на тест были нативные кнопки Like и Share от "ВКонтакте" и Facebook. Правда, у Twitter, Surfingbird и Google+ такого отдельного вида нет, поэтому в обоих вариациях для этих сервисов стояли одни и те же кнопки.
Раньше на ЦП стояли нативные кнопки, затем их заменили на красивые кастомные, что вызвало одобрение со стороны пользователей. После редизайна снова вернулись нативные - многим это не понравилось. В общем, кастомные и нативные кнопки явно напрашивались на тест.
Нельзя было не взять в тест специальные сервисы-конструкторы социальных кнопок - AddThis и Pluso. Остальные сервисы брать не стали - опасался, трафика TJ просто не хватило бы, чтобы получить на таком количестве вариаций репрезентативные данные.
Итого, в соревновании приняли участие:
- кнопки Like;
- снова кнопки Like (для A/A теста, чтобы убедиться, что все настроено корректно);
- кнопки Share;
- кастомные кнопки, которые нарисовал дизайнер TJournal;
- AddThis;
- Pluso.
Выбор метрик
Придумали несколько вариантов, как сравнивать эффективность кнопок:
- количество нажатий на кнопки;
- количество расшариваний (это не то же самое, что нажатия, так как у некоторых кнопок шеринг происходят в два захода);
- количество переходов по расшаренным ссылкам.
Первый вариант отпал сразу, так как было неочевидно, что количество нажатий всегда коррелирует с трафиком. Например, кнопка "Мне нравится" от "ВКонтакте" вообще ничего не отправляет в профиль пользователя и нужно догадаться нажать после этого еще на кнопку "Рассказать друзьям". Очень похожая ситуация с Like от Facebook: возможно, ее проще нажать, чем в два захода расшарить через Share, но мы не знаем, что Facebook выше ранжирует в своём ньюсфиде.
Я решил, что самая правильная метрика - это количество трафика, который приходит из соцсетей. Во-первых, ради него эти кнопки и ставятся. Во-вторых, отделив трафик, который приходит через кнопки, можно сравнить его с естественным (который приходит от сообществ в соцсетях или ссылки, которые пользователи расшаривают через Ctrl+C Ctrl+V).
Поэтому для эксперимента было необходимо разметить UTM-метками ссылки, которые будут расшариваться в соцсети.
Как засунуть в кнопки UTM-метки и не сойти с ума
Идея теста, поначалу показавшаяся легкой и изящной, на практике чуть не довела нас с разработчиком до истерики.
Решили сделать следующий формат UTM-меток:
http://tjournal.ru/paper/emojinalysis-tumblr?utm_source=facebook.com&utm_medium=social&utm_content=likebutton&utm_campaign=abtestsocial
В utm_source мы записывали, через какую кнопку пользователь расшаривал статью. Соответственно, для "ВКонтакте" это vk.com, для Твиттера - t.co и так далее. Это нужно для того, чтобы трафик корректно учитывался в Google Analytics. В utm_medium указывали, что тип трафика - social, он не менялся в зависимости от соцсети. Аналогично было сделано для корректного учета типа трафика в Google Analytics. В utm_content мы записывали, через какой набор социальных кнопок пользователь расшарил ссылку. Значение менялось в зависимости от соцсети. В utm_campaign всегда ставился abtestsocial, чтобы легко было выделить трафик с нашего эксперимента.
Проблема начались сразу же, когда мы стали прописывать url для нативных кнопок. И Facebook, и "ВКонтакте", и все остальные позволяют явно указать, какой URL расшаривать, даже если пользователь находится на странице с другим адресом. Например, для Facebook наш код выглядел вот так:
<div class="fb-like" data-href="http://tjournal.ru/paper/rcs-hacking-team/?utm_source=facebook.com&utm_medium=social&utm_content=likebutton2&utm_campaign=abtestsocial" data-send="false" data-layout="button_count" data-width="200" data-show-faces="false"></div>
Для "ВКонтакте":
<script type="text/javascript"> VK.Widgets.Like("vk_like_top", { type: "button", pageUrl: "http://tjournal.ru/paper/rcs-hacking-team/?utm_source=vk.com&utm_medium=social&utm_content=likebutton2&utm_campaign=abtestsocial", pageTitle: "Спецслужбы научились прослушивать смартфоны при помощи легального вируса", pageDescription: "Два независимых центра исследований компьютерной безопасности опубликовали отчёты о новых инструментах компании Hacking Team, стоящих на вооружении мировых спецслужб и правоохранительных сил, позволяющих легально получать доступ к содержимому смартфонов подозреваемых.", pageImage: "https://api.tjournal.ru/1/paper/picture?id=4841", height: 20 }); </script>
Поставили код на страницы, я нажал Like и… в обе соцсети расшарились URL без GET-параметров и UTM-меток. Черт! Ладно, вспомнили про Open Graph тег og:url, который говорит, какую страницу расшарить. Прописываем в него UTM-метки в зависимости от вариации, в которую попадает пользователь, обновляем код, жму Like… Ничего не меняется. Вспоминаю, что Facebook кэширует данные из OG-тегов и нужно явно зайти на Facebook Open Graph Debugger, чтобы он заново спарсил данные со страницы. Результата ноль, в обе соцсети уходят ссылки без UTM-меток. Ложусь спать ( важная подробность - прим. ред. ).
На следующий день вспоминаю, про ещё один тег, применяемый для поисковых систем. И в наших танцах с бубнами сработал именно он.
Дальше пошло чуть проще: Facebook share работает так же, как Like, так что проблем не возникло. Но нативная кнопка "Поделиться" от "ВКонтакте" упорно не хотела расшаривать правильный URL, обрезая его после первого параметра, в результате чего получалось http://tjournal.ru/paper/emojinalysis-tumblr?utm_source=facebook.com. Попробовали заэнкодить URL - помогло, кнопки шаринга побеждены.
Дальше оказалось, что для Pluso нельзя указать разные ссылки для разных кнопок. Всем им везде в source мы написали pluso. Не очень изящно, но не смертельно. И вылез еще один негативный момент: поскольку для каждой кнопки URL был свой, пользователи всегда видели небольшое количество лайков на странице. Это теоретически может негативно повлиять на количество трафика - психологически проще нажать на кнопку, если на ней уже много лайков.
Итак, кнопки заработали. Осталось разделить трафик и запустить эксперимент.
Как мы разделили трафик
Решили не пользоваться сторонними сервисами и трафик разделить на сервере. Слово техническому директору "Комитета" Илье Чекальскому:
Когда пользователь заходит на TJournal мы смотрим, есть ли у него кука ab-testing-24. Если есть, то смотрим ее значение и показываем пользователю соответствующий набор кнопок. Если куки нет, то ставим ее и записываем туда рандомное значение от 1 до 24
Если в куке стояло 1-4, то показывали первый набор кнопок. Если 5-8, то второй и так далее. Предусмотрительный Илья сделал 24 вариации на случай, если я сойду с ума и вдруг захочу сделать 8 наборов кнопок в тесте. Но я удержался.
Чтобы убедиться, что трафик распределился равномерно, мы прописали каждому пользователю Custom Dimension, где указали, в какую вариацию он попал.
Запуск теста и первые результаты
26 мая мы запустили тест.
В первый же день обозначился явный лидер и я уже было посчитал, что такими темпами эксперимент закончится через пару дней:
27 мая отрыв межу сервисами сократился, а 28 числа произошло вообще что-то непонятное:
Каждый день данные скакали. Становилось очевидно, что тест проваливается по очень простой причине: если на TJournal зайду я, попаду в вариацию с кнопками Like и зайдет Навальный на вариацию с кнопками AddThis, то при расшаривании в соцсети, при прочих равных вариация, AddThis соберет на порядок больше трафика. Кроме того, у TJournal стоит стандартный для Google Analytics период отслеживания кампаний в 6 месяцев. Это значит, что пользователи, которые придут в первый день по ссылкам Навального, а во второй день зайдут type-in трафиком, все равно во второй день будут засчитываться как посетители из AddThis.
Выяснить, какие кнопки лучше таким измерением трафика не получается.
Выводы
Чтобы хоть как-то померять эффективность кнопок, 14 июня мы добавили трекинг нажатия на кнопки и через Events стали отправлять его в Google Analytics. Но пока данных недостаточно и все равно эксперимент этот не покажет действительно, сколько трафика приведут те или иные кнопки.
Из положительных моментов - мы смогли точно посчитать, сколько трафика в месяц приносят TJ социальные кнопки. Всего за последние 30 дней на сайт было 900 000 переходов из социальных сетей. Всего 30 000 из них было сгенерировано социальными кнопками.
Задача от Growth Hacks
До 2 июля включительно мы объявляем конкурс на лучшее решение этой задачи. Победитель получит суммарно 50 000 показов баннеров своего проекта на ЦП и TJ. Пишите свои варианты в комментариях. Если нужны какие-то уточнения по данным - готовы опубликовать. После этого мы реализуем лучший вариант на TJournal и напишем о результатах в нашей рубрике.