Определение изменения положения мобильных устройств в руках пользователей

Каждый хороший веб-мастер, аналитик, юзабилист и любой другой человек, который отвечает за развитие сайта и удобство его использования, должен задаваться вопросом как пользователи держат свое мобильное устройство при просмотре их сайта? Горизонтально или вертикально? А если горизонтально, то на каком типе устройства: смартфон или планшет? Если большинство пользователей просматривают сайт при горизонтально положении мобильного устройства, то все ли корректно выводится на экран? Удобно ли использовать сайт пользователям при таком типе наклона? Поэтому определение изменения положения мобильных устройств в руках пользователей для всех них это приоритет знаний, который поможет узнать о предпочтениях их собственных пользователей, улучшить юзабилити сайта и как следствие повысить конверсии своего сайта. Следовательно в данной статье мы разберем как нам отследить изменения положения мобильных устройств в руках пользователей и передать в систему аналитики Google Analytics

Определяем наши цели

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

Необходимый набор инструментов для поставленных целей

1. Google Analytics. В нем мы будем обрабатывать и хранить полученную информацию
2. Google Tag Manager. Будет передавать полученную информацию о положении мобильного устройства в руках пользователя в Google Analytics
3. И наконец, нам необходим сам скрипт js для получения информации о положении мобильного устройства в руках пользователя

Начнем разбираться с третьего пункта, так как он является основным и плавно перейдем к первому.

Скрипт js для получения информации о положении мобильного устройства в руках пользователя

Для быстрой реализации задачи решил воспользоваться уже готовым скриптом для определения типа устройства от Matthew Hudson. Спасибо ему за это, так как данный скрипт определяет тип устройства, его операционную систему и положение экрана мобильных устройств в руках пользователей.
Нам всего лишь остается скачать device.min.js и залить к себе на сайт.
Однако, для того, чтобы он заработал так как необходимо именно нам, придется написать небольшой скрипт его обработки и передачи информации, но уже в Google Tag Manager.

Определение изменения положения мобильных устройств в руках пользователей — установка и настройка с помощью Google Tag Manager

Шаг первый

И так, нам необходимо как-то обрабатывать полученную информацию скрипта device.min.js и передавать ее в Google Analytics. Следовательно, в GTM необходимо написать свой собственный скрипт.
Для этого, для начала нам необходим подключить device.min.js к сайту. Это можно сделать следующим способом

if(typeof device != 'object') {
	var jq = document.createElement('script');
	jq.src = "/указываем путь к файлу на вашем сайте/device.min.js";
	document.getElementsByTagName('head')[0].appendChild(jq);
}

Не забудьте указать путь к Вашему файлу в строке jq.src =
После этого, нам необходимо обрабатывать данные в случаи успешного определения, применить удобные значения для себя и отправить в массив с помощью DataLayer

if(typeof device !== 'undefined') { 
		var typedevice = device.mobile() ? 'смартфон' : device.tablet() ? 'планшет' : 'компьютер',
			orientationposition = device.portrait() ? 'вертикальное' : 'горизонтальное';
		window.dataLayer.push({
			 'event' : 'Информация об устройстве', 
			 'type' : typedevice, 
			 'orientation' : orientationposition
		});	
	}

, где
device !== ‘undefined’ — Если устройство точно определенно, то…
var typedevice — указываем удобные для себя значения для типов устройств: смартфон, планшет, компьютер
orientationposition = device.portrait() — указываем положения устройства в пространстве: вертикальное, горизонтальное
После чего отправляем полученные данные в массив
Для надежности отправления данных с помощью DataLayer следует вызывать вышеуказанною функцию принудительно через 0,5 секунд с помощью функции setTimeout(function()
В итоге получается следующий скрипт

<script type="text/javascript">
if(typeof device != 'object') {
	var jq = document.createElement('script');
	jq.src = "/указываем путь к файлу на вашем сайте/device.min.js";
	document.getElementsByTagName('head')[0].appendChild(jq);
}
setTimeout(function(){
	if(typeof device !== 'undefined') {
		var typedevice = device.mobile() ? 'смартфон' : device.tablet() ? 'планжет' : 'компьютер',
			orientationposition = device.portrait() ? 'вертикальное' : 'горизонтальное';
		window.dataLayer.push({
			 'event' : 'Информация об устройстве', 
			 'type' : typedevice, 
			 'orientation' : orientationposition
		});	
	}
}, 500);
</script>

Шаг второй

Размещаем созданный нами выше скрипт в Goggole Tag Manager следующим образом:

• Теги → Создать → Конфигурация тега → Пользовательский HTML
• В поле HTML вставляем код

  <script type="text/javascript">
  if(typeof device != 'object') {
  	var jq = document.createElement('script');
  	jq.src = "/public_html/analytics/device.min.js"; /* Не забудьте указать свой путь к файлу device.min.js */
  	document.getElementsByTagName('head')[0].appendChild(jq);
  }
  setTimeout(function(){
  	if(typeof device !== 'undefined') {
  		var typedevice = device.mobile() ? 'смартфон' : device.tablet() ? 'планжет' : 'компьютер',
  			orientationposition = device.portrait() ? 'вертикальное' : 'горизонтальное';
  		window.dataLayer.push({
  			 'event' : 'Информация об устройстве', 
  			 'type' : typedevice, 
  			 'orientation' : orientationposition
  		});	
  	}
  }, 500);
  </script>

• Задаем имя тега «Прослушивание изменения положения мобильных»
• Триггеры → All Pages
• Сохраняем
  

  

Далее нам необходимо указать название переменных, которые мы отправляем в массив с помощью DataLayer, чтобы извлечь оттуда полученные данные. Для этого необходимо Создать три переменных уровня данных следующим образом:

1. Первая переменная
   • Переменные → Создать → Конфигурация переменной → Переменная уровня данных
   • В поле имя переменной указываем первое переменной — event
   • Выбираем Версию уровня данных — Версия 2
   • Задаем имя переменной «ПУД — Информация об устройстве»
   • Сохраняем
     Создание переменной уровня данных в GTM — Информация об устройстве[/caption]
2. Вторая переменная
   • Переменные → Создать → Конфигурация переменной → Переменная уровня данных
   • В поле имя переменной указываем первое переменной — type
   • Выбираем Версию уровня данных — Версия 2
   • Задаем имя переменной «ПУД — Тип устройства»
   • Сохраняем
3. Третья переменная
   • Переменные → Создать → Конфигурация переменной → Переменная уровня данных
   • В поле имя переменной указываем первое переменной — orientation
   • Выбираем Версию уровня данных — Версия 2
   • Задаем имя переменной «ПУД — Ориентация устройства в пространстве»
   • Сохраняем

Теперь нам необходимо создать триггер, который будет активировать тег передачи события в Google Analytics. Для этого в GTM производим следующие действия:

• Триггеры → Создать → Настройка триггера → Пользовательское событие
• Присваиваем имя триггеру «Триггер получения информации об устройстве»
• В поле имя события указываем «Информация об устройстве»
• Выбираем в поле Триггер активируется на следующих страницах: Некоторые специальные события
• Указываем Event → равно → Информация об устройстве
• Сохраняем
  

  

И на самое интересное напоследок — создания тега события Google Analitics для передачи, хранения и обработки полученных данных. Осталось:

• Теги → Создать → Конфигурация тега → Universal Analytics
• Присваиваем имя тегу «Событие.GA — Информация об устройстве»
• В поле идентификатор отслеживания указываем Ваш номер счетчика или выбираем константу {{К. Идентификатор отслеживания}}
  Как правильно устанавливать счетчик Analytics через GTM Вы можете ознакомиться в данной статье
• В поле Тип отслеживание выбираем Событие
• Категория → {{ПУД — Информация об устройстве}}
• Действие → {{ПУД — Тип устройства}}
• Ярлык → {{ПУД — Ориентация устройства в пространстве}}
• Триггеры → Триггер получения информации об устройстве
• Сохраняем