Интернет магазин шабонов
Форма входа

Бесплатный раздел

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

Работает ли Ваш адаптивный дизайн? Google Analytics ответит на этот вопрос (часть 1)

Дата добавления: 21.09.2014 - 12:31
Добавил: Buger
Количество просмотров: 792
Количество комментариев: 0
Рейтинг материала: 3.0 / 2
Работает ли Ваш адаптивный дизайн? Google Analytics ответит на этот вопрос (часть 1)
БЕСПЛАТНО
Для скачивания файлов, необходима авторизация или регистрация на нашем ресурсе.
рейтинг 3.0
/
голосов 2
Адаптивный веб-дизайн превратился в главный метод развития и разработки интерфейса сайтов. Благодаря ему легче думать, в первую очередь, о мобильных устройствах.

В начале развития адаптивного дизайна, было распространено создание CSS контрольных точек для конкретных размеров экрана, например 320 пикселей для iPhone и 768 пикселей для 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);

Далее вставляем специальный код, который позволить WURFL передавать свою информацию в 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' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

Если же вы используете обновлённую версию “Universal 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, не забудьте вставить собственные параметры. Это можно сделать, пройдя в раздел Администратор → Пользовательские определения → Пользовательские параметры.



Источник: http://ruseller.com
Добавлять комментарии могут только зарегистрированные пользователи.