• 8 минут чтения

• Мобильная версия, JavaScript, Визуализация данных, Аналитика, Адаптивный дизайн

• Поделись ТвиттерЛинкедин

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

На заре адаптивного веб-дизайна создание контрольных точек в CSS для определенных размеров экрана было обычным явлением, например, 320 пикселей для iPhone и 768 пикселей для iPad, а затем мы тестировали и отслеживали эти устройства. По мере развития адаптивного дизайна мы все чаще начинаем с контента, а затем устанавливаем точки останова, когда контент «ломается». Это означает, что вы можете столкнуться с несколькими контрольными точками, ориентированными на контент, и без конкретных устройств или форм-факторов, на которых можно было бы протестировать ваш веб-сайт.

Дальнейшее чтение на SmashingMag:

• Руководство по Google Analytics и полезным инструментам
• Держите свои аналитические данные в безопасности и чистоте
• Включение многоэкранного отслеживания с помощью Google Analytics
• Как использовать аналитику для создания более умного мобильного веб-сайта

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

Точки останова, ориентированные на контент, безусловно, являются правильным выбором, но они также означают, что более важно отслеживать ваш веб-сайт, чтобы определить, когда он сломается. Эта информация, если она легкодоступна, дает подсказки о том, какие типы устройств и форм-факторы следует тестировать дальше.

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

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

Ускорение и оптимизация взаимодействия с пользователем для конкретного устройства или семейства устройств всегда проще. В действительности, однако, создание интерфейса для всех типов устройств невозможно, учитывая, что разнообразие устройств с доступом в Интернет будет только расти. Однако каждое устройство имеет определенный форм-фактор. Люк Вроблевски, автор Мобильный прежде всеговыделяет три категории для определения взаимодействия с устройством:

• использование или поза,
• Метод ввода,
• вывод или экран.

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

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

• рабочий стол,
• приложение,
• планшет,
• смартфон,
• функция телефона,
• Smart TV,
• робот,
• другие немобильные,
• другой мобильный.

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

Первый шаг — разместить WURFL.js на страницах, которые вы хотите отслеживать. Просто вставьте эту строку кода в свою разметку:

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

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

console.log(WURFL.form_factor);

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

/* Google Analytics' standard tracking code */
_gaq.push(['_setAccount', 'UA-99999999-1']);
_gaq.push(['_setDomainName', example.com']);
_gaq.push(['_trackPageview']);

/* Tell Google Analytics to log WURFL.js' data */
 _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]);

/* The rest of Analytics' standard tracking code */
(function() {
var ga = document.createElement('script'); ga.type="text/javascript"; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'https://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

Или, если вы обновили Google Analytics до нового «Универсального“вы бы добавили это:

/* Google Analytics' new universal tracking code */
(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');

/* Define the custom dimensions */
ga('send', 'pageview', {
  'dimension1': WURFL.complete_device_name,
  'dimension2': WURFL.form_factor,
  'dimension3': WURFL.is_mobile
});

Кроме того, если вы используете GA Universal Analytics, вы должны не забыть определить пользовательские параметры. Вы делаете это, нажав Admin → Custom Definitions → Custom Dimensions.

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

Теперь, когда данные находятся в Google Analytics, нам нужно сделать их доступными для проверки. Мы можем использовать пользовательские переменные в Analytics несколькими способами, наиболее очевидным из которых является поиск в меню слева и щелчок Audience → Custom → Custom Variables:

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

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

Большая картина с виджетами на приборной панели

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

Давайте создадим несколько виджетов для отображения состояния различных форм-факторов. Во-первых, создайте виджет круговой диаграммы, который показывает, насколько ваш веб-сайт используется различными форм-факторами.

На панели инструментов нажмите Add WidgetВыбрать Pieто Sessions метрика и сгруппировать ее по form factor пользовательская переменная. Обратите внимание, что метка в зеленом раскрывающемся списке Custom Variables, а не настоящее имя. В нашем примере form factor переменная находится во втором слоте, но обязательно выберите правильный слот, если вы реализовали ее в другом порядке. Опять же, если вы перешли на Universal Analytics, процедура аналогична, но вместо выбора пользовательских переменных вы просто добавляете имя своего пользовательского параметра, как и для любого другого параметра.

Затем создайте несколько виджетов для отображения посещений и показателей отказов для каждого форм-фактора. Виджеты покажут, оказали ли изменения на веб-сайте положительное или отрицательное влияние. Очевидно, вам нужно больше посещений и низкий показатель отказов.

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

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

Сегменты форм-фактора

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

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

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

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

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

Здесь мы использовали Google Analytics, но WURFL.js, конечно же, совместим с другими инструментами аналитики, если разрешены пользовательские переменные, подобные приведенным выше.

Вывод

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

В качестве следующего шага изучите конверсии и цели в Google Analytics, чтобы узнать, как интегрировать и отслеживать форм-факторы, которые будут различаться в зависимости от функции и цели веб-сайта. Чтобы дать вам преимущество, мы создали шаблон, который вы можете установить на своей панели инструментов Google Analytics (в этом шаблоне используются настраиваемые переменные, а не настраиваемые параметры). Просто следуйте инструкциям по назначению ресурса Analytics, который появится в разделе Dashboards → Private.

(ал, мл, ил)