Адаптивний веб-дизайн став домінуючим методом розробки і проектування сайтів. Це сприяє розробці за принципом «mobile first» і допомагає створювати сайти, легкодоступні з мобільних пристроїв.

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

Адаптивний дизайн еволюціонує, і зараз ми частіше починаємо з контенту, а потім встановлюємо контрольні точки там, де виникає «розрив» контенту. Це означає, що ви можете розробляти певну кількість контент-орієнтованих контрольних точок, без необхідності тестувати сайт для окремих пристроїв або форм-факторів.

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

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

У Google Analytics є відмінні інструменти для відстеження пристроїв користувачів; однак, для створення ефективного адаптивного веб-дизайну, нам більш важлива інформація про форм-факторах, а не про пристроях.

У цій статті ми покажемо, як можна поєднати можливості WURFL.js і Google Analytics, щоб визначити показники продуктивності форм-факторів. І нам не потрібно буде більше гадати — у нас на руках буде конкретна інформація.

Чому саме форм-фактори?

Прискорювати і оптимізувати досвід взаємодії користувача для певного пристрою або сімейства пристроїв завжди легше. Проте в реальності створити досвід взаємодії певного пристрою для всіх типів пристроїв не представляється можливим.

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

  • використання або стан;
  • метод введення;
  • висновок або екран.

Оскільки пристрої відрізняються за цими категоріями, з їх допомогою ми отримуємо різні форм-фактори. Отже, застосування форм-фактора як основного елементу, за допомогою якого ми проводимо моніторинг адаптивного дизайну, має сенс. Це дасть нам інформацію стосовно того, під який пристрій нам потрібно розвивати юзабіліті.

У прикладах, наведених у цій статті, використовується WURFL.js, в тому числі надані їм форм-фактори. А саме:

  • стаціонарний комп’ютер;
  • додаток;
  • планшет;
  • смартфон;
  • телефон;
  • Smart TV;
  • Робот;
  • інші немобільні пристрою;
  • інші мобільні пристрої.

Надання даних для Google Analytics

Спочатку ми повинні розмістити WURFL.js на сторінках, які ми хочемо відстежувати. Просто вставте цей рядок коду розмітку сторінки:

Таким чином, створюється глобальний об’єкт 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 Універсальний Analytics, ви повинні пам’ятати, що вам потрібно визначити користувальницькі величини. Робиться це наступним чином: AdminCustom DefinitionsCustom Dimensions:

Для Універсальний Analytics ви повинні визначити користувальницькі величини в розділі Admin:

Чи працює ваш адаптивний дизайн? Відповідь - в Analytics

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