Ваш адаптивный дизайн работает? Google Analytics расскажет вам

[ad_1]
⭐
Ваш адаптивный дизайн работает? Google Analytics расскажет вам
Адаптивный веб-дизайн стал доминирующим методом разработки и дизайна веб-сайтов. Это облегчает мысль «мобильный прежде всего» и создать веб-сайт, который будет доступен для просмотра на мобильных устройствах. На заре адаптивного веб-дизайна создание контрольных точек в CSS для определенных размеров экрана было обычным явлением, например, 320 пикселей для iPhone и 768 пикселей для iPad, а затем мы тестировали и отслеживали эти устройства. По мере развития адаптивного дизайна мы все чаще начинаем с контента, а затем устанавливаем точки останова, когда контент «ломается». Это означает, что вы можете столкнуться с несколькими контрольными точками, ориентированными на контент, и без конкретных устройств или форм-факторов, на которых можно было бы протестировать ваш веб-сайт.
Адаптивный веб-дизайн стал доминирующим методом разработки и дизайна веб-сайтов. Это упрощает мышление «сначала мобильные» и создание веб-сайта, который можно просматривать на мобильных устройствах.
На заре адаптивного веб-дизайна создание контрольных точек в 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
.

Admin
раздел. (Большой превью)Анализ данных в 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.

(ал, мл, ил)
[ad_2]
Source: https://smashingmagazine.com
Заключение
Вы ознакомились с статьей — Ваш адаптивный дизайн работает? Google Analytics расскажет вам
Пожалуйста оцените статью, и напишите комментарий.