Хорошо ли работает ваш адаптивный дизайн? Google Analytics даст ответ

Адаптивный веб-дизайн стал основным методом разработки и проектирования сайтов. С ним намного проще «начинать с мобильных» и создавать сайты, работающие на портативных устройствах.

Для первопроходцев адаптивного дизайна было обычным делом создавать брейкпоинты с помощью CSS для конкретных размеров экрана, например 320 px для iPhone и 768 px для iPad, а затем тестировать сайт на устройствах и отслеживать результаты. По мере развития адаптивного дизайна мы всё чаще начинаем работу с контента и устанавливаем «переломные» точки там, где «ломается» контент. В результате такой работы мы имеем набор всего из нескольких брейкпоинтов, заточенных под контент, но не привязанных к конктретным формфакторам или устройствам, на которых можно было бы провести тесты.

Остаётся только гадать, как наш дизайн будет работать на устройствах разных классов, формфакторов и с разными моделями взаимодействия. Но надо не гадать, а постоянно отслеживать эффективность дизайна с помощью реальных данных о трафике.

Брейкпоинты, привязанные к контенту — хорошее решение, но, используя их, аналитики должны особенно внимательно следить за тем, где «разбивается» сайт. Имея эти данные под рукой, легко определять, на каких типах устройств и формфакторах пора тестировать сайт.

В Google Analytics есть отличные функции, учитывающие работу сайта на разных устройствах, но мы, адаптивные дизайнеры, работаем в первую очередь с формфакторами — не с устройствами. В этой статье мы расскажем, как WURFL.js и Google Analytics могут работать в тандеме, чтобы показывать вам метрики эффективности сайта для разных формфактров. Гадать больше не придётся.

Почему формфакторы?

Всегда проще ускорить работу сайта или оптимизировать пользовательский опыт для конктретного устройства или семейства. Но на практике разработать отдельный опыт для каждого существующего на рынке устройства просто невозможно: их слишком много и число их будет только расти. Однако каждое устройство можно отнести к тому или иному формфактору. Люк Вроблевски, автор книги «Сначала мобильные» («Mobile First»), выделяет три признака для классификации пользователького опыта для разных устройств:

• область применения и положение тела пользователя,
• способ ввода данных,
• вывод, или экран.

Сочетание разных признаков даёт нам всё многообразие формфакторов. Поэтому вполне логично использовать формфакторы в качестве основных параметров для отслеживания показателей адаптивного сайта. Так мы узнаем, на каких устройствах тестировать юзабилити ресурса.

Во всех описанных ниже примерах используется WURFL.js, включая выделяемые им формфакторы, а именно:

• настольный компьютер,
• эпп,
• планшет,
• смартфон,
• телефон с минимальным набором функций,
• смарт-ТВ,
• робот,
• другие немобильные устройства,
• другие мобильные устройства.

Передача данных в Google Analytics

Первое, что нужно сделать — это поместить WURFL.js на страницы, которые вы хотите отслеживать. Просто вставьте туда этот код:

<script type="text/javascript" src="//wurfl.io/wurfl.js"></script>

Так у вас появится глобальный объект WURFL, доступный через JavaScript:

console.log(WURFL.form_factor);

Теперь, когда тег script на месте, остаётся только добавить выделенные строки в код отслеживания Google Analytics:

/* стандартный код отслеживания Google Analytics */
_gaq.push(['_setAccount', 'UA-99999999-1']);
_gaq.push(['_setDomainName', example.com']);
_gaq.push(['_trackPageview']);

 /* говорит Google Analytics загрузить данные WURFL.js */
_gaq.push(['_setCustomVar', 1,’complete_device_name’,WURFL.complete_device_name,1]);
_gaq.push(['_setCustomVar', 2,'form_factor',WURFL.form_factor,1]);
_gaq.push(['_setCustomVar', 3,'is_mobile',WURFL.is_mobile,1]);

/* продолжение стандартного кода отслеживания Google Analytics */
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

Если вы перешли на новую версию Google Analytics — Universal Analytics, вставьте этот код:

/* новый универсальный код отслеживания Google Analytics */
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-99999999-1, 'auto');

/* определяет специальные параметры */
ga('send', 'pageview', {
'dimension1?: WURFL.complete_device_name,
'dimension2?: WURFL.form_factor,
'dimension3?: WURFL.is_mobile
});

Дальше. Если вы используете Universal Analytics, не забудьте назначить специальные параметры. Для этого надо нажать на кнопку Администратор (Admin) > Специальные определения (Custom Definitions) > Специальные параметры (Custom Dimensions).

В Universal Analytics надо назначить специальные параметры в разделе Admin:

Анализ данных в Google Analytics

Теперь, когда данные попали в Google Analytics, надо сделать их доступными для анализа. Есть несколько способов использования специальных переменных, и самый простой из них — посмотреть в меню слева и нажать кнопку Аудитория (Audience) > Персонализированный (Custom) > Специальные переменные (Custom Variables):

Отчёт по специальным переменным:

Если вы используете Universal Analytics, специальные параметры доступны вам, как и остальные параметры, во всех отчётах GA:

Доступ к специальным параметрам:

Уже сейчас мы видим, как разнится поведение сайта на различных формфакторах. Разумеется, выбор самых информативных метрик будет зависеть от сайта, но в целом рекомендуем обратить внимание на коэффициент отказов и количество страниц, просмотренных за одно посещение ресурса.

Полная картина — сводки с виджетами

Благодаря сводкам в Google Analytics мы получаем подробную раскладку по важнейшим метрикам. Это отличный способ оценить эффективность сайта на разных формфакторах. Ещё раз напомним, что для начала лучше всего проверить коэффициент отказов и количество страниц на посещение. Цель виджетов сводки — оповестить вас об «опасности» и наглядно показать изменения в поведении сайта на разных типах устройств.

Давайте создадим несколько виджетов, визуализирующих эффективность сайта на различных формфакторах. Сначала создадим круговую диаграмму, которая покажет, как часто ресурс просматривают с того или иного типа устройства.

Виджет, демонстрирующий соотношение форм-факторов:

В Сводке нажмите кнопку Добавить виджет (Add Widget), выберите Круговую диаграмму (Pie), затем метрику Сансы (Sessions) и сгруппируйте их по специальной переменной формфактора. Обратите внимание на название зеленого выпадающего меню — это не конкретное название, а Специальная переменная (Custom Variable). В нашем примере формфактор помещается во втором слоте, но возможен и другой порядок — убедитесь, что вы выбрали нужный слот. В Universal Analytics процедура происходит точно так же, только вместо выбора специальной переменной надо добавить название специального параметра — так, как бы вы поступили с любым другим параметром.

Теперь создадим несколько виджетов, визуализирующих число посещений и коэффициент отказов для каждого формфактора. Они покажут, какой эффект дали изменения сайта: положительный или отрицательный. Размумеется, мы хотим увидеть высокую посещаемость и низкий коэффициент отказов.

Создание виджета «Формфакторы»:

Этот виджет создаётся добавлением фильтра к стандартным показателям. Выберите диаграмму с временной шкалой и отфильтруйте данные с помощью специальной переменной там, где вы сохранили формфакторы. Создайте свой виджет для каждого формфактора, который вас интересует:

Виджеты для формфакторов в сводке:

Вы можете заметить, что в статистике по глобальному коэффициенту отказов отсутствует часть формфакторов — это связано с увеличением объёма данных (как на примере выше). Как показывают красные стрелки, со смартфонами и простыми телефонами случилась катастрофа! В частности, на целевую страницу внесли изменения, которые должны были повысить трафик с планшетов, и, очевидно, эти изменения оказали крайне негативное действие на трафик со смартфонов и телефонов. Чтобы найти брешь, могут потребоваться более подробные отчёты, и часто для этого нужна информация по формфакторам.

Сегментация по формфакторам

Разумеется, любая специальная переменная, которую вы назначите в Google Analytics, будет доступна вам в большинстве отчётов как фильтр или параметр, так что заточить их под свои нужды не составит труда. Ещё один способ всегда помнить про формфакторы — сделать для них сегменты, задав соответствующие условия. Мы будем отслеживать по 1 сегменту для формфактора:

Задайте сегмент. В случае с Universal Analytics используйте не специальные переменные, а специальные параметры:

То же самое в Universal Analytics:

Google Analytics покажет эти сегменты в большинстве стандартных отчётов как отдельные параметры в графиках и таблицах.

График с сегментами:

В большинстве отчётов формфактор можно использовать как параметр. Как мы уже говорили, ключевые показатели — это коэффициент отказов и общая вовлечённость пользователей, но цели и конверсия, разумеется, тоже заслуживают внимания. Возможно, вы захотите создать новые цели или как минимум изучить воронку конверсии для некоторых формфакторов.

Потратив на изучение формфакторов немного времени, вы поймёте, как надо изменить для них пользовательский опыт. Более того, может потребоваться настройка целей, воронки или рекламных кампаний — с учётом особенностей использования различных типов устройств.

Мы используем Google Analytics, но, разумеется, WURFL.js совместим с другими аналогичными инструментами — со всеми, допускающими использование специальных переменных.

Заключение

В этой статье мы рассказали, как важно оценивать эффективность работы сайта на различных формфакторах и как WURFL.js и Google Analytics помогают нам визуализировать их данные. Как только вы вставите код WURFL.js в GA, его данные станут доступны почти во всех отчётах в качестве фильтров и переменных, и настройка отчётов под конкретные задачи не вызовет у вас проблем. Виджеты в сводке дадут подробную информацию по разным формфакторам. Начать рекомендуем с коэффициента отказов и показов страниц за посещение. Создание сегментов по формфакторам позволит вам получать наглядные данные в большинстве стандартных отчётов.

Затем посмотрите на конверсию и цели в Google Analytics — вы поймёте, как работать с формфакторами с учётом особенностей и задач конкретного сайта. Для начала вы можете установить в Google Analytics нашшаблон сводки (обратите внимание: он использует не специальные параметры, а специальные переменные). Просто следуйте инструкциям по назначению собственности в GA, которая затем появится в Сводке (Dashboards) > Личные (Private).