Мы все чаще используют отзывчивый дизайн, отзывчивый дизайн с серверными компонентами (ССГ), адаптивный дизайн и их комбинаций, чтобы обеспечить большую полиэкранные опытом высокопроизводительные.Тем не менее, аналитики реализации часто пропускают информацию, которая важна для понимания того, как сайт используется на различных устройствах .

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

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

Общие Challenges

Экран Size

Google Analytics классифицирует устройства как настольный компьютер, мобильный телефон или планшет.Информация, которая важна для дизайнеров, таких как физический размер экрана, теряется такой сегментации.Рассмотрим веб-страницу, что хорошо работает на современном 4,7-дюймовый смартфон (например, iPhone 6).Предположим, при отображении на таком устройстве в портретной ориентации в нижней четверти экрана ключ появляется сообщение.На той же странице на 3,5-дюймовом смартфоне (таких, как iPhone 4) не будет показывать эту ключевую сообщение без прокрутки вниз.Дизайнер, возможно, не знали, что это конкретное сообщение является ключом к успеху этой странице.Различные предпочтения устройства ориентации усложнить задачу дальше.Аналитика средства обеспечивают понимание, необходимое для управления постоянного понимания и улучшение .

²

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

⁵

Layout

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

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

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

Основное содержание еще более важно.Информация об активном макет страницы — ли определяется запросами средств массовой информации или с помощью предпочтений пользователя для desktop-, smartphone- или таблеток Оптимизированное расположение — может улучшить понимание.Рассмотрим страницу с пяти основных прямоугольников действий, которые располагаются горизонтально на столе, но появляются вертикально на смартфоне в портретной ориентации.Пятый прямоугольник в нижней части списка будет рассматриваться реже на смартфоны.Понимание влияния этой разницы в положении и просмотр вероятность может привести вас кэкспериментировать с различными позиционирования для смартфонов .

Performance

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

Bring On Всеобщей Analytics

В конце 2013, Universal Analytics оставили бета, и это теперь доступно для всех сайтов.Google в настоящее время рекомендует обновление до Универсальные Analytics от классических.Универсальный Аналитика имеет ряд преимуществ:

1. JavaScript фрагмент и включают в себя более чувствительны, повышение качества информации, полученной .
2. Взаимодействие с и настройки фрагмент легче .
3. Другие пользовательские параметры и показатели доступны в бесплатной версии .
4. Кроме JavaScript Опции доступны для передачи информации деятельности, в том числе с веб-сервера и от Android и IOS приложений .

Обновление Универсальный от классических является двухэтапный процесс.Во-первых, обновить веб-ресурс с помощью Администрация сайта Google Analytics “.Если свойство не используете Universal, то появится опция в меню «Admin» консультирует опции.Тем не менее, Google так стремится обновить сайты, которые он может уже подали изменения для Вас!Если это так, то страница “Код отслеживания” будет начинаться с «Это Универсальные Аналитика кода отслеживания для этого свойства.”

⁸

Вторая часть вам придется делать самостоятельно: изменение фрагмент JavaScript на Вашем веб-сайте.JavaScript фрагмент должны not обновить до недвижимости была изменена, чтобы Универсальные Analytics в предыдущем шаге.Простейшая реализация заключается в следующем:

<script> (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', '[TRACKING_ID]', 'auto'); ga('send', 'pageview'); </script>

Вы заменяете бы [TRACKING_ID] с уникальным отслеживания идентификационного кода для вашего веб-ресурса .

Пользовательские Dimensions

После обновления до вселенской будет завершена, вы можете добавить информацию в Google Analytics с помощью “ Пользовательские Dimensions ¹⁰ . “

Пользовательские размеры могут быть определены в меню «Свойства» на экране «Администрирование».Следующий скриншот показывает собственности без каких-либо измерений настроен .

¹¹

До 20 размеры могут быть добавлены к собственности в бесплатной версии Google Analytics, которая является более 15 больше, чем в классическом варианте. Заплатили version ¹³ позволяет 200 .

Устройство Orientation

Устройство ориентации могут быть легко вычислен в JavaScript, определяя высоту и ширину окна.Если высота больше, чем ширина, то устройство находится в вертикальной ориентации.Если нет, то это в альбомной ориентации.Следующий JavaScript возвращает ориентации строку, используя эту логику:

window.innerHeight > window.innerWidth ? 'Portrait' : 'Landscape'

С помощью созданного пользовательского размера и кормления свое значение от этого JavaScript, мы можем легко добавлять эту информацию о запросе страниц, чтобы Google Analytics.Следующий скриншот показывает простой диалог, который отображается при нажатии кнопки “Новый пользовательский измерение”.Потому что ориентация устройства может меняться в течение сессии, новый пользовательский измерение добавляется к нему, с объема

“Ориентация” измерение было добавлено, с индексом, начиная с “1″ на следующем скриншоте показан новый размер и его индекс.В момент написания я не знаю ни о способе удаления пользовательских размеров в бесплатной версии Google Analytics, поэтому планировать наперед

¹⁴

Кормление пользовательского Dimensions

Теперь, размер был создан для анализа, мы должны заполнить ее данными.Это влечет за собой добавление наличие которая возвращает необходимые данные с данными Google Analytics, кормить .

Установка индекс измерения на экране «Администрирование», то есть так же, как размерности, используемой в коде, который передает данные Google Analytics является критическим.В этом случае индекс “1″, и ключевое поле, таким образом, составляет dimension1.Следующий Google Analytics фрагмент был расширен, чтобы добавить данные пользовательского измерения в индексе 1 .

<script>

(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', '[TRACKING_ID]', 'auto'); 
ga('set', 'dimension1', window.innerHeight > window.innerWidth ? 'Portrait' : 'Landscape');
ga('send', 'pageview');

</script>

Нью-Field

Новый пользовательский размер, названный “Ориентация”, теперь будет доступна для анализа.Он появится в списке доступных полей в настоящем разделе “специальные размеры”, и она может быть доступна из условий сегментов, в качестве вторичного измерения, и от любых других областях интерфейса отчетов Google Analytics, в котором перечислены поля .

Let It Settle

Терпение добродетель, и нужно время, чтобы проверить результаты изменений.Следующий скриншот показывает процент пользователей по ориентации в течение одного месяца .

Экран Size

Источники данных третьих лиц также может использоваться для подачи пользовательских размеров. 51Degrees ¹⁶ (компания, которую я основал) можно обнаружить информацию о физическом size ¹⁷ , возвращая количество квадратных дюймов или длины диагонали, округлыедо ближайшего целого значения .

После включения сегменты могут быть созданы на основе физического размера экрана насравнить различные результаты, отвечая на такие вопросы, как:

• Ли показатель отказов варьироваться в зависимости от физического размера экрана для определенных страницах
• Как цель завершение зависит от физического размера экрана

В отличие от размерности ориентации, физический размер экрана не изменится во время сеанса, так что складывается с “Сессия” рамки .

“ ScreenInchesDiagonalRounded ¹⁸ ” измерение было добавлено, с индексом “2″.

Теперь, размер был создан для анализа, мы должны заполнить ее данными.Чтобы сделать примеры в этой статье легко следовать, я создал website ¹⁹ , который настроен на обнаружить devices ²⁰ и обеспечивать необходимую наличиересурсы.Следующий фрагмент включает в себя ресурс, который обеспечивает доступ к собственности »ScreenInchesDiagonalRounded” .

<script src="http://js.51degrees.com/51Degrees.features.js?ScreenInchesDiagonalRounded" type="text/javascript"></script>

С выше добавляется перед Google Analytics фрагмент, “ScreenInchesDiagonalRounded” размер (с индексом “2″ в списке пользовательских размеров) могут быть заполнены значения, возвращаемого в “пятьдесят одна степеней возможности” включают в себя фрагмент,воздействии путем FODF объект .

<script>

(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', '[TRACKING_ID]', 'auto'); 
ga('set', 'dimension1', window.innerHeight > window.innerWidth ? 'Portrait' : 'Landscape'); 
ga('set', 'dimension2', FODF.ScreenInchesDiagonalRounded); 
ga('send', 'pageview');

</script>

Подчеркнул дополнительная строка кода устанавливает второе измерение к значению FODF.ScreenInchesDiagonalRounded, что диагональ длины экрана в дюймах, округляется до ближайшего целого числа .

Insight

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

²¹

Теперь мы можем четко определить использование в 3-, 4-, 5- и 6-дюймовыми экранами внутри, что Google будет классифицировать как “мобильный” типа устройства.Мы также видим, что 10-дюймовые экраны доминировать “таблетка” тип устройства .

Производительность является King

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

Инспектор сетевой ресурс в современных веб-браузеров, таких как Chrome ясно показывает проблему.Следующий скриншот показывает 51Degrees.features.js запрос от предыдущего примера.Мы видим, что 76 миллисекунд тратится в то время как браузер ждет, чтобы отправить запрос на ресурс .

К счастью, эта проблема может быть легко устранена несколькими способами .

Асинхронный JavaScript

Один подход заключается в загрузке как analytics.js файл и возможности скрипта асинхронно.onload событие возможности скрипта может быть использован для загрузки сценария Google Analytics и устанавливать пользовательские размеры, необходимые Google.Следующий фрагмент кода будет заменить те, которые предусмотрены раньше, в том числе 51Degrees.features.js включают .

<script type="text/javascript">

(function(d,t,s,a,p){ a = d.createElement(t); a.type = 'text/javascript'; a.async = true; a.src = s; p = d.getElementsByTagName(t)[0]; a.onload = function() { (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', '[TRACKING_ID]', 'auto'); 
ga('set', 'dimension1', window.innerHeight > window.innerWidth ? 'Portrait' : 'Landscape'); 
ga('set', 'dimension2', FODF.ScreenInchesDiagonalRounded); 
ga('send', 'pageview'); }; 
p.parentNode.insertBefore(a,p); })(document,'script','http://js.51degrees.com/51Degrees.features.js?ScreenInchesDiagonalRounded');

</script>

Использование Network Inspector, мы можем увидеть разницу в скриншоте ниже .

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

Сервера Side

Единственный способ устранить влияние обработки и отправки информации от клиента на Google Analytics является выполнение этой деятельности на сервере.Этот метод работает только тогда, когда веб-сервер может видеть все движения, а также, когда веб-страницы не публично кэшируются (хотя содержание в них содержится еще может быть публично кэше или подается с сети доставки контента).Таким образом, техника не может быть использован на всех веб-сайтах или все страницы .

GoogleАналитика фрагмент кода делает GET запрос, который содержит использования и отслеживания информации в строку запроса.Network Inspector показывает выход JavaScript Google Analytics “.Мы видим, фильтр для запросов к https://www.google-analytics.com/collect и запрос, похожий на следующее:

https://www.google-analytics.com/collect?v=1&_v=j23&a=123456789&t=pageview&_s=1&dl=https%3A%2F%2Fexample.com%2FPage&ul=en-us&de=UTF-8&dt=Page&sd=24-bit&sr=1280x720&vp=1263x622&je=1&fl=14.0%20r0&_u=eDCAgEQi~&jid=&cid=123456789.123456789&tid=UA-123456789-1&cd1=6&z=459486931

не

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

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров