Работает ли ваш адаптивный дизайн? Ответ - в 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, вы должны помнить, что вам нужно определить пользовательские величины. Делается это следующим образом: Admin – Custom Definitions – Custom Dimensions:
Для Universal Analytics вы должны определить пользовательские величины в разделе Admin:
