Мрачные дебри Яндекс.Метрики и GTM никогда не пугали настоящего аналитика. Более того, настоящие спецы черпают в этих дебрях вдохновение. Если повезет, то они могут рассказать вам такое, что ни одному продакт-оунеру даже в страшном сне не привидится. Однако большинство из нас привыкли выжимать максимум из веб-аналитики лишь на уже запущенных проектах. В лучшем случае мы вываливаем MVP, снимаем данные и с их учетом кроим-перекраиваем сервис.
Но ведь очевидно, что можно заюзать веб-аналитику еще раньше, прямо на этапе прототипирования. Детально проработанный в Axure прототип позволяет порой творить настоящие чудеса, и одно из них - это проведение удаленного количественного тестирования. Просто представьте: половина ваших гипотез может быть опровергнута еще до первой строчки кода (ну или подтверждена, что реже). Вы можете выявить первичные дыры в вашей воронке, не вставая с места и не приглашая толпу респондентов на тестирование в офис. Достаточно выбрать немножко представителей ЦА и просто дать им ссылку - дальше за вас все сделает веб-аналитика.
Причем даже если вы совсем ничего не будете настраивать в аналитике, а только подключите к прототипу счетчик, то тот же дефолтный гугл сможет показать вам вот такую историю:
Прекрасно, не правда ли? Вот на этой странице сразу отвалилось столько-то процентов, а остальные разбежались кто куда - значит, здесь явные проблемы. Ну а если уж подключить события, настроить отчеты/воронки/вебвизор, то можно выявлять "узкие места" с ювелирной точностью. И это, повторяю, еще даже до первой строчки кода.
Конечно, я чуток утрирую. Нюансов довольно много, и о части из них я здесь расскажу. Как и том, как же приготовить всю эту кашу.
Ингредиенты
Прототип
Для начала вам понадобится мощный Axure-прототип, по которому можно пройти все основные сценарии (включая тупиковые). Он должен содержать максимум интерактивности, пользователь не должен виснуть на псевдо-маркерах картинки-карты или тупить над сверх-упрощенным попапом обрезки изображений. Это важно, потому что иначе вы не получите реальной картины: пользователи будут отваливаться там, где в реальном сервисе они пролетят со свистом. Впрочем, о всех преимуществах и недостатках таких прототипов я уже писал здесь, в Дзене.
Аналитика
Вторым ингредиентом станут базовые знания в любой системе веб-аналитики: хоть в Яндекс.Метрике, хоть в Google Analytics . Вам нужно лишь понимать, как создавать счетчик и посылать в аналитику события. Это не сложно, частично я и это покажу.
В примерах ниже используется GA (gtag.js), но с той же Метрикой шаги полностью аналогичные, только код другой.
Все, больше нам ничего не понадобится. Можем приступать.
Рецепт
1. Получаем код счетчика
Для начала нужно сформировать код счетчика. Здесь все просто, не буду подробно останавливаться. Это все знают, даже яндекс с гуглом: просто представим, что у вас уже есть этот непонятный кусок кода, который нынче принято пихать в каждый сайт.
2. Добавляем код счетчика в прототип
Это самый интересный момент. Тут доступны два варианта, в зависимости от места "дислокации" прототипа.
Первый вариант (предпочтительный) - это подключить счетчик через плагины на share.axure.com. Он подходит, если вы используете не локальную генерацию HTML, а заливаете прототип на сервис Axure.
Второй вариант - внедрение кода отслеживания непосредственно в прототип. Он потребуется, если вы используете локальную генерацию HTML и затем заливаете прототип на собственный ресурс. Этот вариант менее стабилен и более сложен, я расскажу о нем в одной из следующих статей, в которой речь будет идти о подключении произвольного JavaScript в Axure. Пока просто знайте, что возможно и такое.
Мы же остановимся на первом варианте.
Итак, для подключения кода отслеживания открываем страницу с вашими workspaces на share.axure.com, выбираем нужный прототип и переходим в раздел "plugins":
Там нажимаем кнопку "new plugin":
Заполняем появившееся окошко: вводим название плагина и код счетчика. Остальные поля оставляем как есть - они настроены правильно.
Нажимаем "save" и на следующем шаге выбираем страницы, на которых наша аналитика будет работать. Если вы хотите добавить отслеживание на все страницы, то просто перемещаем все их в правый столбец. Если нужно, чтобы код появлялся и на новых страницах, ставим галочку напротив "Add to new pages by default":
Снова жмакаем "save". Все, базовую аналитику уже можно юзать. Например, нам становятся доступны последовательности переходов пользователей, время пребывания на сайте, глубина просмотров и прочие параметры.
3. Добавляем отправку событий
Однако все мы любим использовать динамические панели в своих Axure-прототипах, верно? А где динамические панели, там и переключение их состояний. Например, частота использования переключателя типа листинга, или "авторизация" пользователя во всплывающем окне - дефолтное подключение не позволит вам анализировать такие вещи. А значит, нам нужны дополнительная отправка некоторых событий из прототипа.
Сделать это, на самом деле, просто. Достаточно отправить событие в аналитику через стандартный event Axure: например, через OnClick. Для этого в Open Link -> Current Window -> Link to an external url or file нужно назначить не открытие внешнего URL, а просто вписать "JavaScript:[КОД_КОМАНДЫ];".
Вот пример с кнопкой логина через Google: "JavaScript: gtag('event', 'login', { method : 'Google' });":
Разбор синтаксиса таких команд не входит в план этого поста, но в сети тьма тьмущая мануалов - если они вам нужны. Так же я не буду рассказывать здесь про построение стратегии веб-аналитики, так как это вообще отдельная бездна и уж точно не в формате Дзена. Скорее всего, напишу об это в блоге (ссылка на него будет в конце статьи).
4. Отключаем карту сайта
Отключение карты сайта (не сокрытия, не сворачивания, именно отключение) - вообще общее правило для прототипов, которые используются в тестировании. Оставляя сайдбар, вы провоцируете пользователя переходить по ссылкам в карте сайта, а не по его основному сценарию.
Для отключения карты сайта можно дать прямую ссылку на HTML-файл (предпочтительно) или добавить параметр #c=2 к ссылке на прототип:
Но при этом нужно понимать, что ссылки на одну и ту же страницу с выключенным и включенным сайдбаром - разные. А значит, в аналитике у вас могут появиться расхождения. Поэтому старайтесь использовать только один вариант или отправлять pageview самостоятельно и отдельно для каждой страницы (для гуру веб-аналитики).
5. Пара слов о вебвизоре
Если вы вдруг захотите использовать Яндекс.Метрику с вебвизором, то вам нужно будет учесть пару моментов.
Во-первых, вебвизор не очень хорошо влияет на быстродействие - ваш прототип может начать сильнее подтормаживать.
Во-вторых, чтобы вебвизор не глючил:
а) прототип не должен быть запаролен;
б) сайдбар в прототипе должен быть отключен.
Итог
Вот, собственно, и все. Самое сложное здесь - это создание детального прототипа, а внедрение аналитики может быть завершено буквально за полчаса (вместе с проставлением ключевых событий). Поэтому если уж у вас есть прототип, на который вы убили пару недель, как минимум странно не прикрутить к нему за 10 минут хотя бы базовую аналитику.
По теме
В этом посте я упоминал про статью, в которой рассматриваются плюсы и минусы сложных прототипов. И тогда уж вот еще небольшой пост про то, как можно использовать базовые JS-команды в Axure.
Еще больше букв и картинок про дизайн и проектирование можно найти на моем сайте и здесь, в дзен-канале.
