Работает ли ваш адаптивный дизайн? Ответ - в Google Analytics

Адаптивный веб-дизайн стал доминирующим методом разработки и проектирования сайтов. Это способствует разработке по принципу “mobile first” и помогает создавать сайты, легкодоступные с мобильных устройств.

Вначале развития адаптивного веб-дизайна было обычным делом создать в CSS контрольные точки для конкретных размеров экрана, например, 320 пикселей для iPhone и 768 пикселей для iPad, а затем тестировать дизайн на этих устройствах.

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

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

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

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

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

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

Ускорять и оптимизировать опыт взаимодействия пользователя для конкретного устройства или семейства устройств всегда легче. Однако в реальности создать опыт взаимодействия определенного устройства для всех типов устройств не представляется возможным.

При том, что количество всевозможных типов и моделей устройств будет только увеличиваться. Тем не менее, каждое устройство имеет особый форм-фактор. Люк Вроблевски, автор Mobile First, выделяет три критерия, по которым можно идентифицировать конкретное устройство:

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

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

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

  • стационарный компьютер;
  • приложение;
  • планшет;
  • смартфон;
  • телефон;
  • Smart TV;
  • Робот;
  • другие немобильные устройства;
  • другие мобильные устройства.

Предоставление данных для 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]);

/* Остальная часть стандартного кода 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);
})();

Или если вы уже обновились до 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
});

Кроме того, если вы используете GA Universal Analytics, вы должны помнить, что вам нужно определить пользовательские величины. Делается это следующим образом: AdminCustom DefinitionsCustom Dimensions:

определяем пользовательские величины

Для Universal Analytics вы должны определить пользовательские величины в разделе Admin:

определить пользовательские величины

Перевод статьи «Is Your Responsive Design Working? Google Analytics Will Tell You» был подготовлен дружной командой проекта Сайтостроение от А до Я.

16 сентября 2014 в 16:13
Вам понравился сайт или конкретно эта страница? Поделитесь ею со своими друзьями, нажав на одну из кнопок соцсетей слева или снизу. Желаете быть в курсе последних обновлений сайта — подпишитесь удобным для вас образом:
или поддержите нас, нажав на кнопку "Мне нравится"!
Материалы по теме
{"url":"http://www.fastvps.ru/", "src":"/images/advbanners/fastvps.png", "alt":"Хостинг Fastvps.ru. Наш выбор!"}
Заработок