Есть два способа, чтобы определить пользователей, которые сделали переход по ссылке вашего сайта с мобильного гаджета с использованием Google Tag Manager.
У большинства сайтов имеется версия, адаптированная под различные мобильные устройства. Для разных типов устройств версии имеют отличия. Каждая из них имеет панель с определенными элементами.
Таким образом выглядит сайт на ПК и на мобильном устройстве.
Развернутая версия сайта, открытая на ПК, может превратиться в путаницу. Или в версии десктоп какие-то функции будут активны, а на мобильном носителе не будут отображаться. Итоговое оформление версии сайта для того или иного устройства могут иметь существенные различия. Это привносит сложности в процесс отслеживания событий на таких объектах.
Как поступить в случае необходимости провести анализ определенных действий с мобильных, чтобы показывать актуальную рекламу заинтересованным пользователям? Для того, чтобы запустить условия активации, нужно определить с какого устройства пользователь перешел на сайт.
Это можно сделать, используя GTM, где создаем переменную пользователя, которая будет отличать пользователей мобильных и ПК.
Рассмотрим два способа:
- С использованием кода JavaScript, который определит устройство, учитывая полученную ширину экрана.
- С использованием кода JavaScript, который возвращает значение правда и ложь (true/false)/
GTM для отслеживания мобильных пользователей. Способ №1
В GTM создаем переменную пользователя по типу Собственный код JavaScript. В Google Tag Manager это будет выглядеть следующим образом:
Комментарий по коду: берем переменную width, куда заносим значения для объекта window. Таким образом мы сможем получить параметры активного окна браузера (функция innerWidth). Затем задаем переменную screenType.
Затем производим запуск условия, который сопоставит параметры окна в пользовательского браузера. Если ширина составляет не более 768 пикселей, то в screenType вносим значение mobile. Если размер окна составляют в пределах 768 — 992, то в СкринТайп вносим значение tablet (планшет). Если размер превышает 992 пикселя, вносим значение desktop (ПК).
В таблицах указаны самые распространенные модели мобильных девайсов. Чтобы ознакомиться с фактической шириной и высотой экрана для планшетов, перейдите во вкладку Tablets.
Максимальное значение составляет 504 пикселя для Blackebrry Passport (при условии вертикального расположения устройства). Есть еще вариант ландшафтной ориентации (столбец CSS height), которую тоже необходимо принять во внимание. Поэтому в код внесен показатель 768.
Справка! В 2001 году HTML4 и CSS2 ввели функцию поддержки таблиц стилей, зависимых от аппарата, что позволило создавать таблицы и стили для различных устройств.
Самые распространенные разрешения смарт-устройств при портретном расположении составляют 320-479 пикселей, планшетов — от 768 до 1024 пикселей (мы ввели значение 992).
Каждый год выпускаются более усовершенствованные модели с большими экранами. При создании отчета в Google Analytics можно увидеть множество разрешений экранов и моделей гаджетов.
Данный скрипт не дает 100% гарантии определения типа устройства. Этот метод имеет два недостатка:
- установленные ограничения по пиксельным параметрам не гарантируют правильные цифровые значения;
- сложности при учете расположения устройства во время просмотра сайта (горизонтальное или вертикальное).
Чтобы это проверить, нужно запустить режим отладки в GTM и посмотреть какой показатель отображается в нашей переменной.
В нашем примере при посещении сайта с ПК, определение типа устройства выполнилось правильно. С помощью функции Toggle Device Toolbar так же можно протестировать адаптивное оформление сайта, имитируя разные параметры и разрешения экрана из списка. После перезагрузки страницы в переменной deviceType1 будет отображено значение mobile.
Эта переменная подойдет для использования в триггерах и тегах при любых условиях активации (здесь можно проявить фантазию) и передать данные в счетчики и аналитики. Так же с помощью этой переменной можно исключить отображение данных, которые не требуется отправлять в Аналитику. В качестве примера приведем клик по мобильному номеру на устройствах.
На ПК невозможно совершить звонок по указанному номеру после этого клика (если не установлена дополнительная программа для звонков). А с мобильного это настройка для возможности потенциального обращения. Люди могут совершать клики с ПК, что искажает статистические показатели.
GTM для отслеживания мобильных пользователей. Способ №2
Этот способ считается максимально точным, но он отображает не тип устройства, а булево значение правда или ложь.
Для использования этого метода, в GTM так же необходимо создать переменную пользователя по типу Собственный код JavaScript.
В JavaScript это будет выглядеть следующим образом:
После сохранения переменной переходим в предварительный просмотр. В данном случае вход выполнен с ПК, поэтому получаем значение ложь.
Так как Гугл Аналитика и представленный скрипт определяет строку путем User-Agent, можно использовать расширение User-Agent Switcher (для Chrome) и изменить показатель.
Для примера выбрано устройство iPhone 6. На изображении выше переменная deviceType2 определила по значению пользователя, вернув показатель правда, а deviceType1 определил устройство как ПК, поскольку ширина экрана превышает 992 пикселя.
Приведем пример настройки триггера, который активируется тогда, когда загрузка страницы осуществляется с мобильного устройства.
